Input

A field that allows users to enter text

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/input.json


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