Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Code Sandbox
Usage
When to use a Text Field VS Text Area
A text field is for single-line text input that is short and specific. Examples of these would be names, passwords, and numbers. If you are looking to input longer lengths of standard text, a text area should be used instead.
Do
Use text fields for responses that are short, specific, and limited in length.
Don't
Text fields should not be used for responses that require sentences.
Use descriptive labels
With very few exceptions, labels should always be used with a text field. The label itself should also be descriptive and clear in its meaning.
Do
Be specific and descriptive of the type of data being requested. In this case, it is the name of a segment.
Don't
Unless your context is very clear, avoid generic labels that can be open to interpretation.
Use descriptive placeholder text
Placeholder text within the text field is optional. When used, it should show an example of what the desired input is.
Do
Placeholder text displaying an example of the type of data input being requested.
Don't
A repeat of the label or a generic description does not provide helpful guidance for users.
Do
Placeholder text displaying an example of the type of data input being requested.
Don't
Do not use placeholder text to reiterate that the text field is mandatory.
Loading Indicator
The loader indicator uses our loading component.
Related Components & Patterns