Components

Input

Input facilitates entry and editing of text and numbers.

Usage

The input component is used to allow the user to input letters and numbers into a field. The input can be validated to ensure it conforms to the expected format. Depending on context accepted input can be restricted to for example only numbers when adding a telephone number. When incorporating an input field into a design, ensure users clearly understand the expected input by effectively using labels, placeholders, and help text.

Interaction states

Default

The default state, prior to user interaction.

Focus

The input field is in focus and is available for accepting input.

Error

Validation has failed and an error message is displayed.

Disabled

The input field is not available for interaction. For accessibility considerations, avoid using the disabled state in your designs if possible.

Regular input and text area

For shorter input of text that comfortably fits on one line of text the regular input field is used, e.g. an email address or an amount of currency. For larger bodies of text, such as a written message, the Text area component can be used, which can be configured to be taller and support multiple lines of text.

Input field

A regular input field.

Text area

A text area, designed for longer blocks of text.

Formatting

Anatomy

The input element features a label, input field, optional help text, error text, and icons.

1. Label text
2. Input text
3. Placeholder text
4. Help text
5. Error text
6. Container
7. Focus indicator
8. Error indicator
9. Icon leading
10. Action trailing
11. Suffix

Label text

Describes the expected input, e.g. “Email address”, “Deposit amount”. Keep the label text short, clear and concise, and pursue to make it no longer than a few words.

Placeholder text

The placeholder text can provide example or hints regarding the expected format value or syntax. Keep in mind that once user starts interacting with the input field, the placeholder text is replaced with the user input, as such it is important to make sure important information is available in the label or help text.

Input text

The provided input by the user.

Help text

The help text is an optional field that can be used to provide additional guidance or contextual information about the expected input. Consider using the help text when extra clarification is needed for the user to complete their task.

Error text

Error text is displayed when validation fails and is used to inform the user that the text or value is incorrect and ideally what need to be corrected in order to achieve success.

Suffix

For certain types of input the suffix field can be enabled in order to provide additional context related to the entered value, such as “kr” when a currency amount is expected.

Icon leading

The Icon leading option can be used for visually further aiding the user in correctly filling the input field with the expected input.

Action trailing

Action trailing is an Icon button that can be used for actions within the input field. Typically it can be used for clearing an input field or revealing / hiding the entered value within a input field used for entering a password.

Modify

Outline variant

The Input component is available as an outline variant, where the background of the container is omitted. When using, be aware of accessibility considerations for the input and placeholder text against the underlying background.

Input in solid and outline variants.