Input

A text input component for forms and user data entry with built-in styling and accessibility features.

Component input-demo not found in registry.

Installation


pnpm dlx createui@latest add input

import { Input } from "@/components/ui/input"

<Input />

Component input-basic not found in registry.

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

Component input-field not found in registry.

Use FieldGroup to show multiple Field blocks and to build forms.

Component input-fieldgroup not found in registry.

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

Component input-disabled not found in registry.

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Component input-invalid not found in registry.

Use the type="file" prop to create a file input.

Component input-file not found in registry.

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

Component input-inline not found in registry.

Use a grid layout to place multiple inputs side by side.

Component input-grid not found in registry.

Use the required attribute to indicate required inputs.

Component input-required not found in registry.

Use Badge in the label to highlight a recommended field.

Component input-badge not found in registry.

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

Component input-input-group not found in registry.

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

Component input-button-group not found in registry.

A full form example with multiple inputs, a select, and a button.

Component input-form not found in registry.

On This Page