Skip to main content

Input (text)

Since 2.6.0 Form-ready since 2.6.0
Show deprecated version


Guidelines​

An input field is a user interface element that allows users to enter and edit text, numbers and symbols. It’s commonly used in forms, search bars, and other areas where data input is required.

Overview

  1. Label
  2. Required indicator
  3. Placeholder
  4. Slot-end
  5. Slot-start
  6. Container
  7. Helper or feedback text
  8. Counter

Options​

  • Label: See form field.
  • Slot options: Add optional elements at the end and/or start of the input field, e.g. an icon, a button or a text option. We typically use slots for additional indications, options or information like a visibility toggle in a password field.
  • Placeholder: Use a placeholder to provide a hint about what to enter or additional relevant context while the input field is empty. We typically use a placeholder when the label is not visible or we need to provide additional context.
  • Helper text: See form field.
  • Counter: See form field.
  • Feedback text: See form field.

Behavior in context​

  • Validation: See validation.
  • Interaction: Clicking in the container enables the editing of the field.
  • Text truncation: The text in an input field is cut off with the length of the container.
  • Alignment: Inputs are always aligned to the left, while right alignment is reserved exclusively for number fields.

States​

The input field has five states: default, focused, hover, disabled and read-only. In the read-only state, the input field is displayed without offering any user interaction.

Field States

Dos and Don’ts​

  • Do use helper text to guide users through the input process
  • Do use feedback text to inform users about the status of their input
  • Do ensure that the width of the input field is appropriate for the expected content
  • Don’t overcrowd the input field with too many elements
  • Don’t use placeholders as a substitute for labels