Input

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @shark-ui/input

Usage

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

<Input />

Sizes

Use the size prop to change the input height.

Extra Small

Small

Large

Extra Large

Examples

Field

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

Field Group

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

Disabled

Use the disabled prop to disable the input. To style the disabled state, add the disabled attribute to the <Field /> component.

Invalid

Use the aria-invalid prop to mark the input as invalid. You can also pass invalid prop to the <Field /> that will disable the label and the <Input /> element or just the <Input /> element.

File

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

You can also use the <FileUpload /> component to upload files.

Inline

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

Grid

Required

Use the required prop to mark the input as required. You can pass required prop to the <Field /> that will make the <Input /> element required.

Use <FieldLabelRequired /> to add a required indicator to the label.

Badge

Use <Badge /> in the label to highlight a recommended field.

Input Group

Use <InputGroup /> to create a input group.

Button Group

Use <ButtonGroup /> to create a button group.

Form

A full form example with multiple inputs.