3

Field

Groups a label, control, and description into an accessible form field. Built on Base UI's field primitive.

Last updated August 9, 2026

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

We'll never share your email.

import { Input } from "@/components/ui/input"
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
 
export function FieldDemoExample() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor="field-demo-email">Email</FieldLabel>
      <Input id="field-demo-email" type="email" placeholder="you@example.com" />
      <FieldDescription>We&apos;ll never share your email.</FieldDescription>
    </Field>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/field.json

Usage

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
 
export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" />
      <FieldDescription>We'll never share your email.</FieldDescription>
    </Field>
  )
}

Horizontal

Set orientation="horizontal" to place the label and control side by side, e.g. for a settings-style toggle row.

import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
 
export function FieldHorizontalExample() {
  return (
    <Field orientation="horizontal" className="w-full max-w-xs">
      <FieldLabel htmlFor="field-horizontal-marketing">
        Marketing emails
      </FieldLabel>
      <Switch id="field-horizontal-marketing" />
    </Field>
  )
}

Error

Enter a valid email address.
import { Input } from "@/components/ui/input"
import {
  Field,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
 
export function FieldErrorExample() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor="field-error-email">Email</FieldLabel>
      <Input
        id="field-error-email"
        type="email"
        defaultValue="not-an-email"
        aria-invalid="true"
      />
      <FieldError match={true}>Enter a valid email address.</FieldError>
    </Field>
  )
}

RTL

ایمیل شما با کسی به اشتراک گذاشته نمی‌شود.

import { Input } from "@/components/ui/input"
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
 
export function FieldRtlExample() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor="field-rtl-email">ایمیل</FieldLabel>
      <Input id="field-rtl-email" type="email" placeholder="you@example.com" />
      <FieldDescription>ایمیل شما با کسی به اشتراک گذاشته نمی‌شود.</FieldDescription>
    </Field>
  )
}

API Reference

FieldError

Edit this page on GitHub
PreviousEmptyNextHover Card