Input
Clean text input with focus ring and error states.
FormsTailwind CSS
Overview
Text inputs allow users to enter and edit text. They are the foundation of forms and data entry.
When to use
- For single-line text entry
- For email, password, or number input
- When you need user input in a form
Preview
Usage
html
<!-- Tailwind CSS pattern - copy the HTML/classes below -->Class Variations
Swap these Tailwind classes to change the pattern's appearance:
Variants
| Variation | Tailwind Classes |
|---|---|
| Default | bg-surface-raised border border-default text-default placeholder:text-subtle focus:ring-primary |
| Error | bg-surface-raised border border-error-border text-default focus:ring-error-emphasis |
| Disabled | bg-surface-sunken border border-default text-muted cursor-not-allowed |
Sizes
| Variation | Tailwind Classes |
|---|---|
| Small | h-8 px-2 text-xs rounded-md |
| Medium | h-10 px-3 text-sm rounded-lgDefault size |
| Large | h-12 px-4 text-base rounded-lg |
States
| Variation | Tailwind Classes |
|---|---|
| Focus | focus:outline-none focus:ring-2 focus:border-transparent |
Guidelines
Do
- • Always provide a visible label
- • Use placeholder text sparingly
- • Show clear error states with helpful messages
- • Match input width to expected content length
Don't
- • Don't use placeholder text as a label
- • Don't make inputs too wide or too narrow
- • Don't hide required field indicators
Accessibility
- • Associate labels with inputs using for/id
- • Use aria-describedby for helper/error text
- • Ensure error states are announced to screen readers
Examples
Default
With Label & Helper
We'll never share your email.
Error State
Please enter a valid email address.