Sections

Components

Utilities

Forms

Hooks

useIsMobile

Field

Copy Markdown

Container for inputs, labels, and helper text.

Docs API

PreviewCode

Username

Choose a unique username for your account.

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/field

Anatomy#

FieldSet
├── FieldLegend
└── FieldGroup
    ├── Field
    ├── FieldLabel
    │ └── FieldRequiredIndicator
    ├── FieldTitle
    ├── FieldDescription
    ├── FieldSeparator
    ├── FieldHelper
    └── FieldError

Usage#

import { 
  Field, 
  FieldLabel, 
  FieldInput, 
  FieldHelper, 
  FieldError 
} from "@/components/ui/field";

<Field>
  <FieldLabel>Email</FieldLabel>
  <FieldInput />
  <FieldHelper>Enter your email address</FieldHelper>
  <FieldError>Email is required</FieldError>
</Field>

Examples#

Input#

PreviewCode

Autocomplete#

PreviewCode

Fruits

Select an item.

Combobox#

PreviewCode

Fruits

Select an item.

Combobox Multiple#

PreviewCode

Fruits

Select multiple items.

Textarea#

PreviewCode

Bio

Write a short bio. Maximum 500 characters.

Select#

PreviewCode

Country

Select a country

BrazilMexicoIreland

Used for shipping estimates

Checkbox#

PreviewCode

Receive notifications

You'll receive a notification when someone posts a comment

Checkbox Group#

PreviewCode

Select the items you want to show:

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Radio Group#

PreviewCode

Choose Plan

Free

Pro

Enterprise

Select the plan that fits your needs.

Switch#

PreviewCode

Airplane mode

Slider#

Use SliderLabel inside the Slider to label the slider.

PreviewCode

Volume

Adjust the volume of the media player

Number Input#

PreviewCode

Quantity

Field Group#

PreviewCode

Newsletter

Choose how you want to receive updates about new features and product releases.

Weekly digest

Updates

Get notified about important account activity. View activity log

Security alerts

Billing reminders

API Reference#

Field#

Root layout for label, control, and helper/error text.

Prop	Type	Default
`orientation`	`"vertical"	"horizontal"
`reverse`	`boolean`	`false`
`invalid`	`boolean`	`-`
`disabled`	`boolean`	`-`
`required`	`boolean`	`-`
`readOnly`	`boolean`	`-`
`asChild`	`boolean`	`-`
`className`	`string`	`-`

FieldSet#

Groups related form controls semantically.

Prop	Type	Default
`className`	`string`	`-`

FieldLegend#

Legend or label for a FieldSet group.

Prop	Type	Default
`variant`	`"legend"	"label"`
`className`	`string`	`-`

FieldGroup#

Groups multiple fields with consistent spacing.

Prop	Type	Default
`className`	`string`	`-`

FieldContent#

Wraps label, description, and error. Use with horizontal orientation.

Prop	Type	Default
`className`	`string`	`-`

FieldLabel#

Label associated with the control.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

FieldRequiredIndicator#

Prop	Type	Default
`children`	`ReactNode`	`"*"`
`className`	`string`	`-`
`asChild`	`boolean`	`-`

FieldTitle#

Title wrapper for grouped field content.

Prop	Type	Default
`className`	`string`	`-`

FieldDescription#

Helper text or description. Shown in muted foreground.

Prop	Type	Default
`className`	`string`	`-`

FieldSeparator#

Horizontal divider between field groups. Optional center label.

Prop	Type	Default
`children`	`ReactNode`	`-`
`className`	`string`	`-`

FieldHelper#

Alias for FieldDescription. Use for consistency with other form libraries.

Prop	Type	Default
`className`	`string`	`-`

FieldError#

Error message shown when the field is invalid. Shown in destructive color.

Prop	Type	Default
`className`	`string`	`-`

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

[

Editable ](/docs/components/editable)[

File Upload ](/docs/components/file-upload)

On This Page

Installation Anatomy Usage Examples Input Autocomplete Combobox Combobox Multiple Textarea Select Checkbox Checkbox Group Radio Group Switch Slider Number Input Field Group API Reference Field FieldSet FieldLegend FieldGroup FieldContent FieldLabel FieldRequiredIndicator FieldTitle FieldDescription FieldSeparator FieldHelper FieldError