Input
Text inputs allow users to enter freeform text. They support multiple types, placeholder text, and validation states for structured data entry.
Anatomy
- 1 Container — border, background, and padding define the field area
- 2 Input primitive — text entry element (value or placeholder)
- 3 Control — trailing action button(s) based on type (clear, +/-, visibility)
Options
States
Table of options
| Property | Values | Default |
|---|---|---|
| type | text / email / password / number / tel / url / search | text |
| placeholder | text | — |
| value | text | — |
| disabled | true / false | false |
| state | default / hover / active / focus / disabled | default |
Behaviors
Text with clear control
Text-type inputs include a clear button that allows users to reset the field value in one action.
Number with increment/decrement
Number inputs show minus and plus buttons for stepping the value without typing.
Password with visibility toggle
Password inputs include a toggle button to reveal or hide the entered value.
Full width
Inputs expand to fill the available inline size of their container.
Keyboard focus
The focus state changes the border color and adds a focus ring.
Disabled state
A disabled input cannot be edited. It is removed from the tab order and uses reduced contrast.
Placeholder text
Placeholder shows a format hint. It disappears on input and is not a substitute for a label.
Usage guidelines
Always pair with a label
<label for="email">Email</label>
Do
Every input must have a visible label or an aria-label.
Don't
Don't use placeholder text as the only label.
Use the right input type
type="email"
Do
Use semantic types to enable browser validation and mobile keyboards.
type="text" for emails
Don't
Don't use type="text" when a more specific type exists.
Content standards
- Placeholder text should show a format example, not repeat the label.
- Keep placeholder text short — it truncates in narrow containers.
- Error messages should identify the field, the problem, and the fix.
Keyboard interactions
| Key | Interaction |
|---|---|
| Tab | Moves focus into or out of the input. |
| Any character | Enters text at the cursor position. |
| Backspace | Deletes the character before the cursor. |
| Ctrl + A | Selects all text in the input. |
Accessibility
- Every input must have a programmatic label via
<label>,aria-label, oraria-labelledby. - Placeholder text is not an accessible label — it disappears on input.
- Disabled inputs use the native
disabledattribute. - Error states should be communicated via
aria-invalidand associated error text viaaria-describedby. - Focus indicators meet 3:1 contrast.
Theming
Input adapts automatically across brands and color modes through component tokens. Use the hero preview switches above to see it in action.
For the full theming architecture see Foundations: Theming.