UI Component LabInput
Text field
A box where the user types a short piece of free text, such as a name.
Demo
Shown on your profile. Up to 20 characters.
Also known as
- Text input — Carbon Design System
- Input — Ant Design
- インプットテキスト — デジタル庁デザインシステム
How to recognize it
A rectangle with a border or an underline, with a label above it. Hint or error text often appears below.
Behavior
- Clicking or tabbing into it shows a text cursor, and typing enters text.
- The label stays visible; placeholder text disappears when typing starts, so it should not replace the label.
- Hint text is linked with aria-describedby so screen readers read it with the label.
Keyboard
| Key | Action |
|---|---|
| Tab | Moves focus into or out of the field. |
| ← / → / Home / End | Moves the text cursor. |
Usage notes
- Do not use placeholder text in place of a label or hint.
- Match the width of the field to the expected length of the input.
- Error messages should say what is wrong and how to fix it.
Similar components
- Combobox: A text field has no suggestions; a combobox adds a list of suggestions to choose from.
- Textarea: A text field takes one short line; a text area takes several lines of free text.
- Search field: A search field is a text field for search terms, usually with a search button and a search landmark.
Sources
- Carbon Design System: Text input (Last checked: )
- Ant Design: Input (Last checked: )
- デジタル庁デザインシステムウェブサイト「インプットテキスト」をもとに作成 (Last checked: )