Components

Input

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

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.

Formatting

Anatomy

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

A. Label text
B. Input text
C. Placeholder text
D. Help text
E. Error text
F. Container
G. Focus indicator
H. Error indicator
I. Icon leading
J. Action trailing
K. 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 input provided 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 needs 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 an 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.