Input
Last Updated: September 2026Inputs are information capture elements that allow the user to directly enter short, unstructured text.
Source CodeAnatomy
link- 1Container
- 2Control
- 3Adornment
Variants
linkDefault
Plain text field with placeholder.
Start adornment
Prefix content via Input.Adornment position="start".
End adornment
Suffix content or icon via position="end".
Disabled
disabled greys out the control and blocks interaction.
Sizes
linkInputs support 3 sizes: S, M, and L.
Usage Guidelines
linkWhen to use
- •For single-line text, email, search, or numeric entry.
- •When you need start/end adornments (currency, units, icons).
- •As the text control inside a labeled Field.
When not to use
- •For choosing from a fixed list — use Select.
- •For international phone numbers with a country picker — use PhoneInput.
- •For multi-line notes — use a textarea pattern instead.
Use adornments to reinforce meaning (search, units, currency).
Don't rely on placeholder alone as the only label in production forms.
Set the correct type (email, search, number) for better mobile keyboards.
Don't build country + phone yourself — use PhoneInput.
Behaviors
linkFocus
- •Focus styles apply on the container via focus-within (accent border and ring).
Invalid / disabled
- •Invalid styling responds to data-invalid on the control (typically from Field).
- •Disabled styling responds to data-disabled; use the disabled prop.
Adornments
- •Children are slotted: Input.Adornment with position start or end.
- •Only one start and one end adornment are extracted via useSlots.
Content Guidelines
linkPlaceholders
- •Use short examples ('name@email.com'), not instructions.
- •Prefer a visible Field.Label; placeholders are supplementary.
Adornment content
- •Keep adornments short — a symbol, unit, or single icon.
- •Don't put interactive primary actions inside adornments.
Accessibility
linkText & Labels
- •Pair with a visible label (Field.Label) in forms.
- •Icon-only adornments should not be the only accessible name — label the input.
ARIA attributes
- •Forward aria-invalid / aria-describedby when composing with Field.
- •Native disabled is exposed on the input element.
Keyboard Support
- •Tab → focus the text control.
- •Standard text editing keys apply.
WCAG Compliance Standards
FAQs
linkHow do I add a prefix or suffix?
Render Input.Adornment as a child with position="start" or position="end".
Can I change height?
Use size="sm" | "md" | "lg". Default is md.
Input vs PhoneInput?
Use Input for general text. Use PhoneInput when you need a country dial-code picker plus tel entry.