Text Input
Used to get user input in a text field. Use when the information is unique to the user and can't be selected from a predefined list.
We'll never share your email with anyone.
preview
props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | Visible label above the input. Max 3 words, noun form. |
size | "small" | "medium" | "large" | "medium" | Height and typographic scale of the input. |
helperText | string | — | Optional hint below the input. Hidden when errorText is set. |
errorText | string | — | Puts the input into error state and shows this message. Only set after the user has finished interacting. |
required | boolean | false | Shows a * on the label and marks the field as required for form validation. |
disabled | boolean | false | Prevents interaction and reduces opacity. |
value | string | — | Controlled value. Pair with onChange for a controlled input. |
onChange | ChangeEventHandler | — | Called on every keystroke when controlled. |
usage
Use a text input when the user needs to enter information that is unique to them and can't be selected from a predefined list. Placeholder text is not supported — use helper text instead when users need guidance on what to enter.
When to use
- In a form, when the user needs to enter information that's unique and can't be selected from a finite list
- When the information is known to the user — like their name or email address
Do not use
- If you need users to enter text that may be more than a single line — use Text Area instead
- If you want to predetermine the information a user must enter — use a specific input like phone number, date, or password input
Label
- Be no more than 3 words
- Be a noun that describes the information the user needs to enter — not a verb
Helper text
- Be a single sentence
- Give extra context to help the user enter the right information
No placeholder text
- People may confuse placeholder content with real values
- Low contrast makes placeholder text difficult to read
- Often used with dummy values, so aren't helpful to users
Error state
- Do not show the error state until the user has finished interacting with the field
- Validate on blur or on form submission — never on every keystroke
We'll use this to send your receipt.
DoUse helper text to provide extra context instead of a placeholder
Don’tUse a verb label — label should be a noun like "Email address"
size
Large56px height. For prominent, spacious form layouts.
Medium48px height. The default for most form contexts.
Small32px pill. For compact or inline form elements.
states
DefaultNeutral border, ready for input
FocusFocus ring shown on keyboard navigation only
Enter a valid email address.
ErrorRed border and error message shown after validation
We'll use this to send your receipt.
With helper textProvides context below the input when no error is present
RequiredAsterisk indicates the field must be completed
DisabledReduced opacity, no interaction