Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsPrinciplesAccessibilityUsage and variationsDemos & APITime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Text fields

StableAccessible

A text field is an input field that the user can interact with and input content and data. The user can also be provided with helper text if needed. Text inputs are used for shorter information while Text areas can be used for multiline answers.

Principles

  • A label should always be provided with a text field.
  • Use a text input when a single line of text is expected. For multiline inputs, use a text area.
  • Allow the text input to reflect the length of the content you expect the user to enter.
  • If possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. Use sentence-case for default values, detected values, and auto-completion text.
  • If possible, do input validation in client-side real-time and provide the user with immediate feedback. See HDS Form validation pattern page for more information.
  • If possible, be forgiving of different input formats and small mistakes. It can greatly increase user experience of your product if you can fix common mistakes for the user.
  • To decrease a cognitive load of the user, it is recommended to mark all required fields. Remember to provide explanation of the required field indicator at the top of your form.

Accessibility

  • Placeholder text can be used to give hints and examples to the user what should be entered to the field. However, all assistive technologies do not threat placeholder texts as labels and therefore they may ignore them completely. Aim to provide the sufficient information to fill the input in the label.
  • It is required to use autocomplete attribute if input control is listed in the common input purposes list. You can read the full list of common input purposes at WCAG 2.1 documentation website. You can read more about the requirement from WCAG 2.1 Identify Input Purpose guideline.
  • In the case of an erroneous input, aim to provide clear instructions to the user on how to correct the mistake. Always provide a text description of the error.

Usage and variations

Text input

A text input serves in most use cases when the user needs to enter information. Text input works well for short inputs that fit in one line and are not longer than one sentence.

Assistive text
Assistive text
Error text
Assistive text

Core code example:

<!-- Enabled -->
<div class="hds-text-input">
<label for="input" class="hds-text-input__label">
Label
<span class="hds-text-input__required">*</span>
</label>
<div class="hds-text-input__input-wrapper">
<input id="input" class="hds-text-input__input" type="text" placeholder="Placeholder" required />
</div>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>
<!-- Disabled -->
<div class="hds-text-input">
<label for="input" class="hds-text-input__label">
Label
</label>
<div class="hds-text-input__input-wrapper">
<input id="input" class="hds-text-input__input" type="text" value="Text input value" disabled />
</div>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>
<!-- Error -->
<div class="hds-text-input hds-text-input--invalid">
<label for="input" class="hds-text-input__label">
Label
</label>
<div class="hds-text-input__input-wrapper">
<input id="input" class="hds-text-input__input" type="text" value="Text input value" />
</div>
<span class="hds-text-input__error-text">Error text</span>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>

React code example:

/* Enabled */
<TextInput
id="input"
label="Label"
placeholder="Placeholder"
helperText="Assistive text"
required
/>
/* Disabled */
<TextInput
id="input"
label="Label"
defaultValue="Text input value"
helperText="Assistive text"
disabled
/>
/* Error */
<TextInput
id="input"
label="Label"
defaultValue="Text input value"
errorText="Error text"
helperText="Assistive text"
invalid
/>

Text area

A text area is meant for situations where inputted text is multiline or contains more than one sentence.

Assistive text
Assistive text
Error text
Assistive text

Core code example:

<!-- Enabled -->
<div class="hds-text-input">
<label for="textarea" class="hds-text-input__label">
Label
<span class="hds-text-input__required">*</span>
</label>
<div class="hds-text-input__input-wrapper">
<textarea id="textarea" class="hds-text-input__input" placeholder="Placeholder" required></textarea>
</div>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>
<!-- Disabled -->
<div class="hds-text-input">
<label for="textarea" class="hds-text-input__label">
Label
</label>
<div class="hds-text-input__input-wrapper">
<textarea id="textarea" class="hds-text-input__input" disabled>
Text area value
</textarea>
</div>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>
<!-- Error -->
<div class="hds-text-input hds-text-input--invalid">
<label for="textarea" class="hds-text-input__label">
Label
</label>
<div class="hds-text-input__input-wrapper">
<textarea id="textarea" class="hds-text-input__input">
Text area value
</textarea>
</div>
<span class="hds-text-input__error-text">Error text</span>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>

React code example:

/* Enabled */
<TextArea
id="textarea"
label="Label"
placeholder="Placeholder"
helperText="Assistive text"
required
/>
/* Disabled */
<TextArea
id="textarea"
label="Label"
defaultValue="Text input value"
helperText="Assistive text"
disabled
/>
/* Error */
<TextArea
id="textarea"
label="Label"
defaultValue="Text input value"
errorText="Error text"
helperText="Assistive text"
invalid
/>

Read-only

Read-only text input is used to indicate an input among other inputs that cannot be edited. This is needed in situations where, for example, the information has been gathered from other source and filled automatically. Read-only fields should not be confused with disabled text fields. Disabled text fields are used when there is an action the user can make to activate the field. Read-only text fields will stay uneditable in the same view.

Assistive text

Core code example:

<div class="hds-text-input">
<label for="input" class="hds-text-input__label">
Label
</label>
<div class="hds-text-input__input-wrapper">
<input id="input" class="hds-text-input__input" type="text" value="Text input value" readonly />
</div>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>

React code example:

<TextInput
id="textarea"
label="Label"
defaultValue="Text input value"
helperText="Assistive text"
readOnly
/>

With tooltip

Both text input and text area can be provided with additional tooltip. Tooltip information should be considered as extra information, for example, why this information is gathered or how is it used. The user should have sufficient information on how to fill the input field in label and assistive text. You can find more information about Tooltips how they are used from the Tooltip documentation page.

React code example:

/* Text input */
<TextInput
id="input"
label="Label"
placeholder="Placeholder"
tooltipLabel="Tooltip label"
tooltipButtonLabel="Tooltip button label"
tooltipText="Tooltips contain &quot;nice to have&quot; information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page."
/>
/* Text area */
<TextArea
id="textarea"
label="Label"
placeholder="Placeholder"
tooltipLabel="Tooltip label"
tooltipButtonLabel="Tooltip button label"
tooltipText="Tooltips contain &quot;nice to have&quot; information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page."
/>

Demos & API

Core

Text inputs in hds-core

Text areas in hds-core

React

Text inputs in hds-react

TextInput API

Text areas in hds-react

TextArea API