Skip to content

Text fields

Text field is a form control that allows a user to write or edit text. It is composed of label, input field and help text.

The component comes with two variants: Rounded (radius: 100%) and compact (radius: 8px). The text area also includes a multiline variant which allows resizing. 

 

Examples

text-field-example-3
Password input
text-field-example-4
Search bar
text-field-example-1
Suffixes and prefixes
text-field-example-2
Chips as input value
text-field-example-5
Multiline input

Anatomy

  • Touch area of an input includes the label, input and helper text. Clicking this area makes the input field active
textfield-area
  • Label must indicate what sort of information the field requires. It is left-aligned and directly above the input area.
  • The touch area includes the label and helper text. Tapping anywhere in the area puts the focus on the input field.
  • Helper text is optional and its placed directly beneath the input area with 8px padding from the left

 

textfield-small

Small 36px
textfield-large

Large 56px

States

textfield-states

Principles

  • Use single line input for inputs which expects only one line of text. For multiline inputs, use multiline text field. 
  • Use 8px rounding in multiline text fields.  
  • Mark all required fields with an asterix (*). Provide an explanation of the required field indicator at the top of your form. 
  • Provide adequate information about the desired input format – use descriptive labels, help text or if necessary, suffixes and prefixes. 
  • Keep the labels short, ideally no more than 5 words. 
  • In case there are restrictions on the field (such as allowing only values between 1-10 or specifying a maximum character limit), inform the user through the helper text. 
  • Adjust the field or option length based on the expected length of the response from the user. For example, do not make numeric fields long if the user is expected to enter only a few numbers. 

Accessibility

  • A visible label should always be provided with a text field. There are a few exceptions where visible label is not required, including: 
  • Search input field accompanied by a search icon 
  • Chat input field 
  • Avoid placeholders when possible. Never use placeholder text to communicate critical information, or as a substitute for a visible label. 
  • Detect and pre-fill inputs to reduce errors and save users’ time.  
  • For form validation, use dynamic form validation by default. The user input is validated right after the focus leaves the current text field (i.e. onBlur event) and moves to the next. 
  • If an error is found during the validation, the form control is set to an error state. Helper text appears and communicates the error message. 

 

textfield-error