Command Palette

Search for a command to run...

Field

shadcn/ui

Composable form field components for building accessible forms.

Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

import {	Field,	FieldDescription,	FieldGroup,	FieldLabel,	FieldLegend,	FieldSet,} from "@/registry/optics/field";import { Input } from "@/registry/optics/input";<FieldGroup>	<FieldSet>		<FieldLegend>Payment Method</FieldLegend>		<FieldDescription>			All transactions are secure and encrypted		</FieldDescription>		<FieldGroup>			<Field>				<FieldLabel htmlFor="card-name">Name on Card</FieldLabel>				<Input id="card-name" placeholder="John Doe" required />			</Field>			<Field>				<FieldLabel htmlFor="card-number">Card Number</FieldLabel>				<Input id="card-number" placeholder="1234 5678 9012 3456" required />				<FieldDescription>					Enter your 16-digit card number				</FieldDescription>			</Field>		</FieldGroup>	</FieldSet></FieldGroup>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/field.json

Props

<Field />
Name
Type
className
string
orientation
"vertical" | "horizontal" | "responsive" (default: "vertical")

<FieldContent />
Name
Type
className
string
<FieldLabel />
Name
Type
className
string
htmlFor
string
<FieldTitle />
Name
Type
className
string
<FieldDescription />
Name
Type
className
string
<FieldError />
Name
Type
className
string
errors
Array<{ message?: string }>
children
React.ReactNode
<FieldGroup />
Name
Type
className
string
<FieldSet />
Name
Type
className
string
<FieldLegend />
Name
Type
className
string
variant
"legend" | "label" (default: "legend")
<FieldSeparator />
Name
Type
className
string
children
React.ReactNode
Empty StateForm