Input
A text input that takes part in a Field's label, description, and validation.
When to use
- Use when
- Short single-line text such as a name, an email, or a search.
- Avoid when
- The text can span lines; use Textarea. Or it is a number with steps; use Number Field.
Installation
The source lands in src/components/ui/input.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.
Usage
Examples
With label
Wrap in Field for a label and a description that are wired up for you.
We send invoices and receipts here.
Disabled
Invalid
Field shows the error and marks the input invalid.
Enter a full email address, like ada@example.com.
Built on
- Packages
@base-ui/react,@stylexjs/stylex- Shelf items
foundations,utils- Accessibility
- Focus, keyboard, and ARIA behavior come from Base UI.
- Figma
- In progress. See Designers and Figma.