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.
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.
We will send a confirmation to this address.
Field Group
Use FieldGroup to stack multiple Field blocks and build forms.
We will send updates to this address.
Disabled
Add the disabled attribute to Input; add data-disabled to Field to style the wrapper.
This field is currently disabled.
Invalid
Set data-invalid on Field, aria-invalid on Input, and use FieldError for the message.
- Phone number is required.
File
Use type="file" to create a file input.
Select a picture to upload.
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.
This field must be filled out.
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.