INPUTS / COMPONENTS
Text field
Collect one precise piece of information.
About text field
Text fields are elements where users can input alphanumeric characters, commonly used in forms and search bars. They include features like labels, placeholders, and validation indicators to guide users in providing accurate information. Password fields provide secure entry, and multiline text fields accommodate longer passages of text.
Anatomy
Shared parts, named consistently.
- 1Text Field inputRequired
The input for the Text Field.
- 2LabelRequired
The label for the Text Field.
- 3Asterisk
An asterisk is used to signify the field is required.
- 4Placeholder
Placeholder text.
- 5Helper message
A string below the input to provide additional context about the Text Field. When in an error state, the helper message will turn red.
- 6Before slot
A fixed-size slot to place an icon or button.
- 7After slot
A fixed-size slot to place an icon or button.
- 8Prefix slot
A slot to place a prefix string like currency type.
- 9Suffix slot
A slot to place a suffix string like a measurement unit.
Try the default
A working example with the shared V1 visual language.
When to use
Use a persistent visible label. Reserve placeholders for examples; connect instructions and errors to the input.
Tab focuses; native editing, selection, and input-type behavior remain available.