New features: This page contains new features. See DESY-163 for details.

Text field

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

Users enter and edit text or numbers in a form using an text input field.

Anatomy

Label
Mandatory (optional)
Container
Helper text
Help label
Info icon (optional)

States

Enabled
Hover
Selected
Focused
Error
Error focused
Read only
Disabled

Example
HTML

Label Change this to a short description.

development/documentation/docs/input/examples/states.html

<div class="d-flex flex-wrap gap-24">
	<!-- 1. Enabled -->
	<div class="form-group docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">1</span>
		<label for="inputStateEnabled">Label</label>
		<input type="text" class="form-control" id="inputStateEnabled" placeholder="Help label" aria-describedby="inputStateEnabledHelp">
		<span id="inputStateEnabledHelp" class="help-block">Change this to a short description.</span>
	</div>

	<!-- 2. Hover -->
	<div class="form-group docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">2</span>
		<label for="inputStateHover">Label</label>
		<input type="text" class="form-control hover" id="inputStateHover" placeholder="Help label" aria-describedby="inputStateHoverHelp">
		<span id="inputStateHoverHelp" class="help-block">Change this to a short description.</span>
	</div>

	<!-- 3. Selected -->
	<div class="form-group docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">3</span>
		<label for="inputStateSelected">Label</label>
		<input type="text" class="form-control selected" id="inputStateSelected" value="Input text" aria-describedby="inputStateSelectedHelp">
		<span id="inputStateSelectedHelp" class="help-block">Change this to a short description.</span>
	</div>

	<!-- 4. Focused -->
	<div class="form-group docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">4</span>
		<label for="inputStateFocused">Label</label>
		<input type="text" class="form-control focus" id="inputStateFocused" placeholder="Help label" aria-describedby="inputStateFocusedHelp">
		<span id="inputStateFocusedHelp" class="help-block">Change this to a short description.</span>
	</div>

	<!-- 5. Error -->
	<div class="form-group has-error docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">5</span>
		<label for="inputStateError">Label</label>
		<input type="text" class="form-control" id="inputStateError" value="Input text" aria-describedby="inputStateErrorHelp">
		<span id="inputStateErrorHelp" class="help-block d-flex align-items-center gap-4"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Change this to a short description.</span>
	</div>

	<!-- 6. Error focused -->
	<div class="form-group has-error docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">6</span>
		<label for="inputStateErrorFocused">Label</label>
		<input type="text" class="form-control focus" id="inputStateErrorFocused" value="Input text" aria-describedby="inputStateErrorFocusedHelp">
		<span id="inputStateErrorFocusedHelp" class="help-block d-flex align-items-center gap-4"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Change this to a short description.</span>
	</div>

	<!-- 7. Read only -->
	<div class="form-group docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">7</span>
		<label for="inputStateReadonly">Label</label>
		<input type="text" class="form-control" id="inputStateReadonly" value="Input text" aria-describedby="inputStateReadonlyHelp" readonly>
		<span id="inputStateReadonlyHelp" class="help-block">Change this to a short description.</span>
	</div>

	<!-- 8. Disabled -->
	<div class="form-group docs-form-state-width">
		<span class="docs-state-number" aria-hidden="true">8</span>
		<label for="inputStateDisabled">Label</label>
		<input type="text" class="form-control" id="inputStateDisabled" placeholder="Help label" aria-describedby="inputStateDisabledHelp" disabled>
		<span id="inputStateDisabledHelp" class="help-block">Change this to a short description.</span>
	</div>
</div>

Label

A label is mandatory for all text fields and should describe the field's purpose. Labels are included by default. If another element (such as a section title) already serves as a clear description, the default label can be visually hidden.

Example
HTML

Label Change this to a short description.

development/documentation/docs/input/examples/default.html

<div class="form-group">
	<label for="defaultInput">Label</label>
	<input type="text" class="form-control" id="defaultInput" placeholder="Help label" aria-describedby="defaultInputHelp">
	<span id="defaultInputHelp" class="help-block">Change this to a short description.</span>
</div>

Required/optional fields

We use an asterisk to indicate a field is required.

The convention of using a red asterisk (*) in a label to denote a required field is a long-standing and widely adopted practice in User Experience (UX) and form design.

Example
HTML

Name

Address

development/documentation/docs/input/examples/mandatory.html

<div class="d-flex flex-wrap gap-24">
	<!-- Required field -->
	<div class="form-group required docs-form-state-width">
		<label for="mandatoryName">Name</label>
		<input type="text" class="form-control" id="mandatoryName" placeholder="John Doe" required>
	</div>

	<!-- Optional field -->
	<div class="form-group docs-form-state-width">
		<label for="mandatoryAddress">Address</label>
		<input type="text" class="form-control" id="mandatoryAddress" placeholder="Vägen 12">
	</div>
</div>

Helper text

Helper text communicates requirements and disclaimers below the field. An error message will always replace the helper text when a field validation error is triggered.

Example
HTML

Email Enter a valid email address (e.g., [email protected]).

development/documentation/docs/input/examples/with-helper-text.html

<div class="form-group required">
	<label for="helperEmail">Email</label>
	<input type="email" class="form-control" id="helperEmail" placeholder="[email protected]" aria-describedby="helperEmailHelp" required>
	<span id="helperEmailHelp" class="help-block">Enter a valid email address (e.g., [email protected]).</span>
</div>

Numeric

The numeric indicators (like character counts or currency values) can have an optional currency indicator.

Example
HTML

Label

SEK

Change this to a short description.

development/documentation/docs/input/examples/numeric.html

<div class="form-group required">
	<label for="numericInput">Label</label>
	<div class="input-group">
		<input type="number" class="form-control" id="numericInput" value="500" aria-describedby="numericInputCurrency numericInputHelp">
		<span class="input-group-text" id="numericInputCurrency" aria-label="Currency: SEK">SEK</span>
	</div>
	<span id="numericInputHelp" class="help-block">Change this to a short description.</span>
</div>

Accessibility

Keyboard interaction

All input fields should be reachable via Tab and Shift+Tab keys.

Example
HTML

Label Change this to a short description.

development/documentation/docs/input/examples/accessibility.html

<div class="form-group">
	<label for="accessibilityFocusInput">Label</label>
	<input type="text" class="form-control focus" id="accessibilityFocusInput" placeholder="Help label" aria-describedby="accessibilityFocusInputHelp">
	<span id="accessibilityFocusInputHelp" class="help-block">Change this to a short description.</span>
</div>

Specs

Input field specifications with spacing and radius annotations

Developer reference

The following sections describe supported functionality that is not part of the Figma design specification.

Demo enabled on this page! The enhanced keyboard-focus behaviour is active on this page — the .keyboard-focus class is added to each .form-group while a control is keyboard-focused, and removed on blur, click or typing. Try pressing Tab to navigate through the form fields. Read more in the Forms accessibility guidelines.

Enhanced mode

Basic design

Default

A basic input field with a label. Apply the .form-control class to the <input> element. Supports all HTML5 text-like input types: text, password, email, number, tel, url, search, date, time, color and related variants.

Example
HTML

Label Change this to a short description.

development/documentation/docs/input/examples/default.html

<div class="form-group">
	<label for="defaultInput">Label</label>
	<input type="text" class="form-control" id="defaultInput" placeholder="Help label" aria-describedby="defaultInputHelp">
	<span id="defaultInputHelp" class="help-block">Change this to a short description.</span>
</div>

Info icon

Wrap the <label> and an info icon in .label-with-info to place the icon beside the label with the 8 px gap from the Figma anatomy. On hover or keyboard focus, the tooltip opens upwards (data-bs-placement="top") to reveal the supporting text.

Keep the icon outside the <label for> so clicking the icon does not focus the input, and mirror the tooltip text into a visually-hidden element that the input references via aria-describedby — that way assistive tech users hear the same help text without depending on the tooltip.

Tooltip behaviour relies on Bootstrap's tooltip plugin (with Popper for positioning). See the Tooltips page for setup details.

Example
HTML

Label

Change this to a short description

development/documentation/docs/input/examples/info-icon.html

<div class="form-group docs-form-state-width">
	<div class="label-with-info">
		<label for="infoIconInput">Label</label>
		<span class="spirisicon spirisicon-sm spirisicon-info" tabindex="0" aria-label="More information about Label" data-bs-toggle="tooltip" data-bs-placement="top" title="Provide a clear, concise description so users understand what to enter."></span>
	</div>
	<input type="text" class="form-control" id="infoIconInput" placeholder="Help label" aria-describedby="infoIconInputHelp infoIconInputInfo">
	<span id="infoIconInputHelp" class="help-block">Change this to a short description</span>
	<span id="infoIconInputInfo" class="sr-only">Provide a clear, concise description so users understand what to enter.</span>
</div>

Numeric currency implementation

Wrap the input and a static suffix in .input-group and apply the .input-group-text class to a <span> for the static, non-interactive content. The addon shares its border edge with the input so the two read as a single visual control.

Use a meaningful aria-label on the suffix (e.g. aria-label="Currency: SEK") and reference the suffix from the input's aria-describedby so screen-reader users understand the value's unit before they type.

Example
HTML

Label

SEK

Change this to a short description.

development/documentation/docs/input/examples/numeric.html

<div class="form-group required">
	<label for="numericInput">Label</label>
	<div class="input-group">
		<input type="number" class="form-control" id="numericInput" value="500" aria-describedby="numericInputCurrency numericInputHelp">
		<span class="input-group-text" id="numericInputCurrency" aria-label="Currency: SEK">SEK</span>
	</div>
	<span id="numericInputHelp" class="help-block">Change this to a short description.</span>
</div>

Disabled state

Add the disabled attribute on an input to prevent user interaction and trigger the disabled visual treatment. The attribute can also be applied to a parent <fieldset> to disable every form control inside it at once.

Example
HTML

Label Change this to a short description.

development/documentation/docs/input/examples/disabled-state.html

<div class="form-group">
	<label for="disabledInput">Label</label>
	<input type="text" class="form-control" id="disabledInput" placeholder="Help label" aria-describedby="disabledInputHelp" disabled>
	<span id="disabledInputHelp" class="help-block">Change this to a short description.</span>
</div>

Error message implementation

Add the .has-error class to the parent .form-group to show the error treatment. Replace the .help-block content with the alert icon plus the error message; the colour switches to --text-error automatically.

Example
HTML

Label Change this to a short description.

development/documentation/docs/input/examples/error-state.html

<div class="form-group required has-error">
	<label for="errorInput">Label</label>
	<input type="text" class="form-control" id="errorInput" value="Input text" aria-describedby="errorInputHelp" required>
	<span id="errorInputHelp" class="help-block d-flex align-items-center gap-4"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Change this to a short description.</span>
</div>

Read-only state

Add the readonly attribute on an input to prevent editing while still allowing the value to be selected and copied. The field uses the muted background and border to indicate the value is not editable.

Example
HTML

Label Change this to a short description.

development/documentation/docs/input/examples/readonly-state.html

<div class="form-group required">
	<label for="readonlyInput">Label</label>
	<input type="text" class="form-control" id="readonlyInput" value="Input text" aria-describedby="readonlyInputHelp" readonly>
	<span id="readonlyInputHelp" class="help-block">Change this to a short description.</span>
</div>

Accessibility implementation

Always associate a <label> with the <input> using matching for and id attributes. When the input has an associated helper or error message, link it via aria-describedby so assistive technology can announce the additional context.

Example
HTML

Email Enter a valid email address (e.g., [email protected]).

development/documentation/docs/input/examples/with-helper-text.html

<div class="form-group required">
	<label for="helperEmail">Email</label>
	<input type="email" class="form-control" id="helperEmail" placeholder="[email protected]" aria-describedby="helperEmailHelp" required>
	<span id="helperEmailHelp" class="help-block">Enter a valid email address (e.g., [email protected]).</span>
</div>

Size variants

The Figma design only documents the standard 32 px input. Two additional size variants are supported in code for backwards compatibility:

.input-lg — 48 px tall, used for large hero forms
.input-sm — 24 px tall, used for compact layouts and toolbars

New designs should default to the standard 32 px size unless there is a specific reason to deviate.

Deprecated: `.inverted` on disabled inputs

Deprecated in 2.1. The .inverted class on disabled and read-only inputs will be removed in 3.0. Use the standard disabled or read-only treatment instead — the inverted styling is no longer aligned with the Figma design.

Label

Text field

Anatomy

States

Label

Required/optional fields

Helper text

Numeric

Accessibility

Keyboard interaction

Specs

Developer reference

Basic design

Default

Info icon

Numeric currency implementation

Disabled state

Error message implementation

Read-only state

Accessibility implementation

Size variants

Deprecated: .inverted on disabled inputs

Deprecated: `.inverted` on disabled inputs