Primitives
Primitive
Input
Text input field for user data entry with various states and styling
Preview
Installation
Usage
Examples
With Label
Add descriptive labels to input fields.
Disabled
Prevent interaction with disabled inputs.
Elevated Variant
On a Card, Dialog, or popover surface, the opaque default input collapses into its parent. Use variant="elevated" for a translucent overlay that adapts to the substrate. See the Surfaces docs for the full reasoning.
On a Card surface
Use
variant="elevated" when the input sits inside a Card, Dialog, or popover.Form Integration
Use Field for labeling, validation, and error display. See the Forms guide for more patterns.
API Reference
The Input component is built on top of Base UI's Input. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.
For the complete Base UI API, see the Base UI Input documentation.
Props
Prop
Type
Default