Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldDemo() {
  return (
    <Field className="max-w-xs">
      <FieldLabel htmlFor="field-store">Store URL</FieldLabel>
      <Input id="field-store" placeholder="your-store.myshopify.com" />
      <FieldDescription>
        The address you sign in to Shopify with.
      </FieldDescription>
    </Field>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/field.json

Usage

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field"

<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>This appears on invoices and emails.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Full name</FieldLabel>
      <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
      <FieldDescription>This appears on invoices and emails.</FieldDescription>
    </Field>
    <Field>
      <FieldLabel htmlFor="username">Username</FieldLabel>
      <Input id="username" autoComplete="off" aria-invalid />
      <FieldError>Choose another username.</FieldError>
    </Field>
    <Field orientation="horizontal">
      <Switch id="newsletter" />
      <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

Examples

Invalid

import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldInvalid() {
  return (
    <Field className="max-w-xs" data-invalid>
      <FieldLabel htmlFor="field-store-invalid">Store URL</FieldLabel>
      <Input id="field-store-invalid" defaultValue="mystore.com" aria-invalid />
      <FieldError>Enter a URL ending in .myshopify.com</FieldError>
    </Field>
  )
}

Fieldset

Workspace

Shown to everyone you invite.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

export function FieldFieldset() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend>Workspace</FieldLegend>
      <FieldDescription>Shown to everyone you invite.</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="field-ws-name">Name</FieldLabel>
          <Input id="field-ws-name" defaultValue="Acme" />
        </Field>
        <Field>
          <FieldLabel htmlFor="field-ws-about">About</FieldLabel>
          <Textarea
            id="field-ws-about"
            placeholder="What does your team work on?"
          />
          <FieldDescription>One or two sentences.</FieldDescription>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

Horizontal

Seats

import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldHorizontal() {
  return (
    <Field orientation="horizontal" className="max-w-sm">
      <FieldLabel htmlFor="field-seats">Seats</FieldLabel>
      <Input id="field-seats" type="number" defaultValue={5} className="w-20" />
    </Field>
  )
}

Separator

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldSeparatorExample() {
  return (
    <FieldGroup className="max-w-xs">
      <Button variant="secondary">Continue with Google</Button>
      <FieldSeparator>Or</FieldSeparator>
      <Field>
        <FieldLabel htmlFor="field-email">Email</FieldLabel>
        <Input id="field-email" type="email" placeholder="you@studio.com" />
      </Field>
    </FieldGroup>
  )
}

API Reference

FieldSet

Container that renders a semantic fieldset with spacing presets.

Prop	Type	Default
`className`	`string`

<FieldSet>
  <FieldLegend>Delivery</FieldLegend>
  <FieldGroup>{/* Fields */}</FieldGroup>
</FieldSet>

FieldLegend

Legend element for a FieldSet. Switch to the label variant to align with label sizing.

Prop	Type	Default
`variant`	`"legend" \| "label"`	`"legend"`
`className`	`string`

<FieldLegend variant="label">Notification Preferences</FieldLegend>

The FieldLegend has two variants: legend and label. The label variant applies label sizing and alignment. Handy if you have nested FieldSet.

FieldGroup

Layout wrapper that stacks Field components and enables container queries for responsive orientations.

Prop	Type	Default
`className`	`string`

<FieldGroup className="@container/field-group flex flex-col gap-6">
  <Field>{/* ... */}</Field>
  <Field>{/* ... */}</Field>
</FieldGroup>

Field

The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.

Prop	Type	Default
`orientation`	`"vertical" \| "horizontal" \| "responsive"`	`"vertical"`
`className`	`string`
`data-invalid`	`boolean`

<Field orientation="horizontal">
  <FieldLabel htmlFor="remember">Remember me</FieldLabel>
  <Switch id="remember" />
</Field>

FieldContent

Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.

Prop	Type	Default
`className`	`string`

<Field>
  <Checkbox id="notifications" />
  <FieldContent>
    <FieldLabel htmlFor="notifications">Notifications</FieldLabel>
    <FieldDescription>Email, SMS, and push options.</FieldDescription>
  </FieldContent>
</Field>

FieldLabel

Label styled for both direct inputs and nested Field children.

Prop	Type	Default
`className`	`string`

<FieldLabel htmlFor="email">Email</FieldLabel>

FieldTitle

Renders a title with label styling inside FieldContent.

Prop	Type	Default
`className`	`string`

<FieldContent>
  <FieldTitle>Enable Touch ID</FieldTitle>
  <FieldDescription>Unlock your device faster.</FieldDescription>
</FieldContent>

FieldDescription

Helper text slot that automatically balances long lines in horizontal layouts.

Prop	Type	Default
`className`	`string`

<FieldDescription>We never share your email with anyone.</FieldDescription>

FieldSeparator

Visual divider to separate sections inside a FieldGroup. Accepts optional inline content.

Prop	Type	Default
`className`	`string`

<FieldSeparator>Or continue with</FieldSeparator>

FieldError

Accessible error container that accepts children or an errors array (e.g., from react-hook-form).

Prop	Type	Default
`errors`	`Array<{ message?: string } \| undefined>`
`className`	`string`

<FieldError errors={errors.username} />

When the errors array contains multiple messages, the component renders a list automatically.

FieldError also accepts issues produced by any validator that implements Standard Schema, including Zod, Valibot, and ArkType. Pass the issues array from the schema result directly to render a unified error list across libraries.

Empty Hover Card

On This Page

Installation Usage Examples Invalid Fieldset Horizontal Separator API Reference FieldSet FieldLegend FieldGroup Field FieldContent FieldLabel FieldTitle FieldDescription FieldSeparator FieldError