Sections

Utilities

Forms

Hooks

useIsMobileNew

Field

Container for inputs, labels, and helper text.

Installation


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

Autocomplete

Combobox

Combobox Multiple

Textarea

Select

Checkbox

Receive notifications

You'll receive a notification when someone posts a comment

Checkbox Group

Select the items you want to show:

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Radio Group

Choose Plan

Select the plan that fits your needs.

Switch

Airplane mode

Slider

Use SliderLabel inside the Slider to label the slider.

Number Input

Field Group

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" \| "responsive"`	`"vertical"`
`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"`	`"legend"`
`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

File Upload