Text Input
Note
A basic input field for entering text.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). | |
| Accessibility: Keyboard interactions | Includes descriptions of all keyboard interactions, focus indication and navigation order. | |
| Accessibility: Text contrast | Text meets a contrast ratio of at least 4.5:1 for small text and 3:1 for large text (WCAG 2.0 1.4.3) and/or a lightness contrast value of at least Lc 75 for standard text and Lc 60 for large text (APCA). | |
| Accessibility: UI component contrast | Visual information required to identify states and boundaries of active UI components has a contrast ratio against adjacent colors of at least 3:1 (WCAG 2.1 1.4.11) and/or a lightness contrast value of at least Lc 60 (APCA). | |
| Usage guidelines | Includes a list of recommended and discouraged usages. | |
| Content guidelines | Includes content standards and guidelines for how to write or format in-product content for the component. | |
| Internationalization | Includes support for various locales and bi-directionality (RTL). | |
| Design tokens | All design attributes (color, typography, layout, animation, etc.) are available as design tokens. |
Anatomy
Default
- Field: The outermost encompassing element.
- Icon: An optional visual element that represents the input field.
- Placeholder: A temporary text provides hints for the expected input.
- Input value: The value entered by the user.
- Clear button: An optional button that clears the input value.
Floating label
- Label: A text label that transitions from an in-field placeholder to a label above the field when focused or filled.
States
Field
Interaction states
Enabled
- Interaction with the input field is available.
Hovered
- The cursor is currently positioned over the input field, indicated by the text cursor and a slightly different border color.
Focused
- The input field is focused via keyboard or mouse interaction, indicated by a thickened border.
Read-only
- The input field is not editable, but its content can still be selected.
Disabled
- Interaction with the input field is disallowed, indicated by a muted appearance.
Value states
Empty
- The field does not contain any input value.
Filled
- The field contains some input value.
Invalid
- The input value does not meet specified criteria, indicated by a red border color and an error message.
Clear button
This sub-component has the same states as [[Button]].
Options
Layering
- Text inputs are available in default or alternative [[Layering]].
Size
- Small and medium text inputs differ in field height.
- Medium is the default text input size.
Floating label
- A label can be optionally included within the input field, which will increase its height.
- The label is maximized within the middle of the field when the input value is empty and the input field has not received focus.
- The label is minimized and floats towards the top when the input field receives focus.
Placeholder
- A placeholder text can be displayed for the purpose of providing the user an input hint.
Clear button
- A clear button can be added to the input field to allow quick clearing of the entered value when clicked.
Icon
- An icon can be optionally added to the leftmost position within the input field.
