Input

A field that allows users to enter text.

Installation


pnpm dlx shadcn@latest add @shark/input


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


<Input />

Use the size prop to change the input height.

Use the disabled prop to disable the input.

Use the invalid prop to mark the input as invalid.

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

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

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

Dedicated File Upload component

For more advanced file upload functionality, use the FileUpload component instead.

Use the orientation="horizontal" prop to create an inline input.

Use the required prop to mark the input as required.

Use FieldRequiredIndicator to add a required indicator to the label.

Use Badge in the label to highlight a recommended field.

Use InputGroup to create an input group.

Use ButtonGroup to create a button group.

Text input. Accepts all native input attributes.

For a complete list of props, see the Ark UI documentation.

On This Page