Input

Preview

When to use

Use an input when you need to collect free-form text or a specific value from the user. Appropriate contexts include:

• Collecting personal information (name, email, phone number, address).
• Accepting a numeric value, such as a quantity or a price.
• Gathering longer free-form text, such as a message or description (use the textarea variant).

When not to use

• Don't use a text input when the user should select from a predefined list — use Select, Radio, or Checkbox instead.
• Avoid using a single-line input for content that typically runs to multiple sentences — use a textarea.
• Don't use a number input for amounts that require high precision or currency handling without clear validation.

Behaviour

Text input — single-line. The user types directly; the field scrolls if the text exceeds the visible width.

Textarea — multi-line. Supports longer text entry. If a character limit is set, the remaining character count is shown as the user types. When the limit is reached, the user cannot type further, and screen readers receive a polite announcement.

Number input — accepts numeric values and includes stepper buttons (increment/decrement). The user can also type directly. When the value reaches the defined minimum or maximum, the corresponding stepper button is disabled. Value changes from steppers are announced via a live region.

Autocomplete attributes (first name, last name, zipcode, etc.) should be applied in code to help browsers pre-fill known values.

Anatomy

• Label — a visible field label above the input. Required for all inputs.
• Helper text (optional) — secondary guidance below the label. Use to clarify format expectations (e.g., "Use the format DD/MM/YYYY") or constraints (e.g., "Maximum 200 characters").
• Input field — the editable area.
• Prefix / suffix (optional) — an icon or short text inside the field boundaries (e.g., a currency symbol, a unit label, or a search icon).
• Error message — replaces or supplements helper text when validation fails.
• Character count (textarea only) — shows remaining characters when a limit is set.
• Stepper buttons (number input only) — increment and decrement buttons flanking the field.

Variants

• Text — single-line text input. Supports optional prefix and suffix.
• Textarea — multi-line text input. Supports a configurable character limit with live countdown.
• Number — numeric input with stepper buttons. Supports min/max constraints.
• Email — single-line text input with type="email" for appropriate mobile keyboard and browser validation.
• Additional types (not Figma components; applied in code) — tel, date, month, and others that use the same visual shell as text input.

States

• Default — the field is empty and ready to receive input.
• Hover — the field border highlights when the cursor moves over it.
• Focus — a visible focus ring and active border appear when the field is active.
• Filled — the field contains a user-entered value.
• Error — validation has failed; the field uses error styling and an error message is shown.
• Disabled — the field is non-interactive and visually reduced. The existing value is preserved but cannot be changed.
• Read only — the field is visible and its value can be copied, but not edited. Read-only fields are still focusable.

Placement & layout

Labels sit above the input field. Helper text and error messages sit below. The field spans the full width of its grid column.

In a form, use consistent field widths within the same section. A short field (e.g., postal code) should be visually narrower than a full-width field (e.g., a description).

Group related fields visually with a section heading or a slight gap increase. Pair each input with a visible label — never rely on placeholder text alone.

Accessibility

• Every input must have a visible, associated <label>.
• Placeholder text is not a substitute for a label. It disappears when the user starts typing, leaving screen reader users and people with memory difficulties without context.
• Error messages must be associated with the field via aria-describedby so they are announced when the user focuses the field.
• For number inputs, announce value changes from stepper buttons using an ARIA live region (polite setting).
• Character count in the textarea should be associated via aria-describedby and updated as the user types.
• When the character limit is reached in a textarea, screen readers should receive a polite announcement.

Related components

• Select — when the user should choose from a fixed list of options.
• Search field — a specialised single-line input for search queries.
• File upload — for attaching files rather than typing values.