Input
A text input field.
formprimitive
Loading preview...
Installation
npx baseui-cn add inputUsage
import { Input } from "@/components/ui/input"<Input placeholder="Enter text..." />Examples
Basic
A simple text input.
Loading preview...
Sizes
sm, md, and lg variants.
Loading preview...
Disabled
A disabled input.
Loading preview...
With Field
Combine with Field for a labeled input with error handling.
Loading preview...
System specimen
A realistic workspace form with ten text-entry controls, labels and helpers, validation, read-only and disabled values, independent addon actions, and nested Card/Frame surfaces.
Loading preview...
API
Input
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "md" | "lg" | "md" | Height and padding scale of the input |
unstyled | boolean | false | Strip the outer wrapper styles for composition inside InputGroup |
nativeInput | boolean | false | Render a plain <input> element instead of the Base UI primitive |
API Reference
See the Base UI Input documentation for the full API reference, including all props, data attributes, and CSS classes.