Input
Single-line text field. Supports every native HTML input type (text, email, number, date, file). Pair it with Field to add a label, description, or error message.
Default
Standard single-line input bound with v-model.
Usage
Import the parts you need from the component's folder.
import { Input } from "@/components/ui/input";Type variants
Every native HTML type is supported through the type attribute.
Field
Wrap Input in Field, use FieldLabel for the label, and FieldDescription for hint text.
Field Group
Use FieldGroup to stack multiple Field blocks and build forms.
Disabled
Add the disabled attribute to Input; add data-disabled to Field to style the wrapper.
Invalid
Set data-invalid on Field, aria-invalid on Input, and use FieldError for the message.
File
Use type="file" to create a file input.
Inline
Use Field with orientation="horizontal" and pair with a Button for an inline search field.
Grid
Use a grid layout to place multiple inputs side by side.
Required
Use the required attribute to indicate required inputs.
Badge
Use a Badge in the label to highlight or tag a field.
Input Group
Use InputGroup to place icons, text, or buttons inside the input.
Form
A full form example composed from multiple inputs.