Github

Field

PreviousNext

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

Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

"use client";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
	Field,
	FieldDescription,
	FieldGroup,
	FieldLabel,
	FieldLegend,
	FieldSeparator,
	FieldSet,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";

const months = [
	{ label: "MM", value: null },
	{ label: "01", value: "01" },
	{ label: "02", value: "02" },
	{ label: "03", value: "03" },
	{ label: "04", value: "04" },
	{ label: "05", value: "05" },
	{ label: "06", value: "06" },
	{ label: "07", value: "07" },
	{ label: "08", value: "08" },
	{ label: "09", value: "09" },
	{ label: "10", value: "10" },
	{ label: "11", value: "11" },
	{ label: "12", value: "12" },
];

const years = [
	{ label: "YYYY", value: null },
	{ label: "2024", value: "2024" },
	{ label: "2025", value: "2025" },
	{ label: "2026", value: "2026" },
	{ label: "2027", value: "2027" },
	{ label: "2028", value: "2028" },
	{ label: "2029", value: "2029" },
];

export function FieldDemo() {
	return (
		<div className="w-full max-w-md">
			<form>
				<FieldGroup>
					<FieldSet>
						<FieldLegend>Payment Method</FieldLegend>
						<FieldDescription>
							All transactions are secure and encrypted
						</FieldDescription>
						<FieldGroup>
							<Field>
								<FieldLabel htmlFor="checkout-card-name">
									Name on Card
								</FieldLabel>
								<Input
									id="checkout-card-name"
									placeholder="Evil Rabbit"
									required
								/>
							</Field>
							<Field>
								<FieldLabel htmlFor="checkout-card-number">
									Card Number
								</FieldLabel>
								<Input
									id="checkout-card-number"
									placeholder="1234 5678 9012 3456"
									required
								/>
								<FieldDescription>
									Enter your 16-digit card number
								</FieldDescription>
							</Field>
							<div className="grid grid-cols-3 gap-4">
								<Field>
									<FieldLabel htmlFor="checkout-exp-month">Month</FieldLabel>
									<Select items={months}>
										<SelectTrigger id="checkout-exp-month">
											<SelectValue />
										</SelectTrigger>
										<SelectContent>
											<SelectGroup>
												{months.map((item, index) => (
													<SelectItem
														key={`${item.value}-${index}`}
														value={item.value}
													>
														{item.label}
													</SelectItem>
												))}
											</SelectGroup>
										</SelectContent>
									</Select>
								</Field>
								<Field>
									<FieldLabel htmlFor="checkout-exp-year">Year</FieldLabel>
									<Select items={years}>
										<SelectTrigger id="checkout-exp-year">
											<SelectValue />
										</SelectTrigger>
										<SelectContent>
											<SelectGroup>
												{years.map((item, index) => (
													<SelectItem
														key={`${item.value}-${index}`}
														value={item.value}
													>
														{item.label}
													</SelectItem>
												))}
											</SelectGroup>
										</SelectContent>
									</Select>
								</Field>
								<Field>
									<FieldLabel htmlFor="checkout-cvv">CVV</FieldLabel>
									<Input id="checkout-cvv" placeholder="123" required />
								</Field>
							</div>
						</FieldGroup>
					</FieldSet>
					<FieldSeparator />
					<FieldSet>
						<FieldLegend>Billing Address</FieldLegend>
						<FieldDescription>
							The billing address associated with your payment method
						</FieldDescription>
						<FieldGroup>
							<Field orientation="horizontal">
								<Checkbox id="same-as-shipping" defaultChecked />
								<FieldLabel htmlFor="same-as-shipping" className="font-normal">
									Same as shipping address
								</FieldLabel>
							</Field>
						</FieldGroup>
					</FieldSet>
					<FieldSet>
						<FieldGroup>
							<Field>
								<FieldLabel htmlFor="checkout-comments">Comments</FieldLabel>
								<Textarea
									id="checkout-comments"
									placeholder="Add any additional comments"
									className="resize-none"
								/>
							</Field>
						</FieldGroup>
					</FieldSet>
					<Field orientation="horizontal">
						<Button type="submit">Submit</Button>
						<Button variant="outline" type="button">
							Cancel
						</Button>
					</Field>
				</FieldGroup>
			</form>
		</div>
	);
}

Installation

pnpm dlx shadcn@latest add https://herocn.dev/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>

Composition

Use the following composition to build Field layouts:

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    ├── Field
    │   ├── FieldLabel
    │   ├── Input / Textarea / Switch / Select
    │   ├── FieldDescription
    │   └── FieldError
    ├── FieldSeparator
    └── Field (orientation="horizontal" | "responsive")

Anatomy

The Field family is designed for composing accessible forms:

<Field>
  <FieldLabel htmlFor="input-id">Label</FieldLabel>
  {/* Input, Select, Switch, etc. */}
  <FieldDescription>Optional helper text.</FieldDescription>
  <FieldError>Validation message.</FieldError>
</Field>
  • Field is the core wrapper for a single field.
  • FieldContent groups title/label + description in horizontal/responsive layouts.
  • FieldGroup stacks related fields and supports FieldSeparator between sections.
  • FieldSet + FieldLegend provide semantic grouping for assistive technologies.

Form

See the Form docs for integrating Field with validation libraries such as React Hook Form and TanStack Form.

Examples

Input

Choose a unique username for your account.

Must be at least 8 characters long.

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

export function FieldInput() {
	return (
		<FieldSet className="w-full max-w-xs">
			<FieldGroup>
				<Field>
					<FieldLabel htmlFor="username">Username</FieldLabel>
					<Input id="username" type="text" placeholder="Max Leiter" />
					<FieldDescription>
						Choose a unique username for your account.
					</FieldDescription>
				</Field>
				<Field>
					<FieldLabel htmlFor="password">Password</FieldLabel>
					<FieldDescription>
						Must be at least 8 characters long.
					</FieldDescription>
					<Input id="password" type="password" placeholder="••••••••" />
				</Field>
			</FieldGroup>
		</FieldSet>
	);
}

Textarea

Share your thoughts about our service.

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

export function FieldTextarea() {
	return (
		<FieldSet className="w-full max-w-xs">
			<FieldGroup>
				<Field>
					<FieldLabel htmlFor="feedback">Feedback</FieldLabel>
					<Textarea
						id="feedback"
						placeholder="Your feedback helps us improve..."
						rows={4}
					/>
					<FieldDescription>
						Share your thoughts about our service.
					</FieldDescription>
				</Field>
			</FieldGroup>
		</FieldSet>
	);
}

Select

Select your department or area of work.

import {
	Field,
	FieldDescription,
	FieldLabel,
} from "@/components/ui/field";
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";

const items = [
	{ label: "Choose department", value: null },
	{ label: "Engineering", value: "engineering" },
	{ label: "Design", value: "design" },
	{ label: "Marketing", value: "marketing" },
	{ label: "Sales", value: "sales" },
	{ label: "Customer Support", value: "support" },
	{ label: "Human Resources", value: "hr" },
	{ label: "Finance", value: "finance" },
	{ label: "Operations", value: "operations" },
];

export function FieldSelect() {
	return (
		<Field className="w-full max-w-xs">
			<FieldLabel>Department</FieldLabel>
			<Select items={items}>
				<SelectTrigger>
					<SelectValue />
				</SelectTrigger>
				<SelectContent>
					<SelectGroup>
						{items.map((item, index) => (
							<SelectItem key={`${item.value}-${index}`} value={item.value}>
								{item.label}
							</SelectItem>
						))}
					</SelectGroup>
				</SelectContent>
			</Select>
			<FieldDescription>
				Select your department or area of work.
			</FieldDescription>
		</Field>
	);
}

Slider

Price Range

Set your budget range ($200 - 800).

"use client";

import * as React from "react";

import {
	Field,
	FieldDescription,
	FieldTitle,
} from "@/components/ui/field";
import { Slider } from "@/components/ui/slider";

export function FieldSlider() {
	const [value, setValue] = React.useState([200, 800]);

	return (
		<Field className="w-full max-w-xs">
			<FieldTitle>Price Range</FieldTitle>
			<FieldDescription>
				Set your budget range ($
				<span className="font-medium tabular-nums">{value[0]}</span> -{" "}
				<span className="font-medium tabular-nums">{value[1]}</span>).
			</FieldDescription>
			<Slider
				value={value}
				onValueChange={(nextValue) => setValue(nextValue as [number, number])}
				max={1000}
				min={0}
				step={10}
				className="mt-2 w-full"
				aria-label="Price Range"
			/>
		</Field>
	);
}

Fieldset

Address Information

We need your address to deliver your order.

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

export function FieldFieldset() {
	return (
		<FieldSet className="w-full max-w-sm">
			<FieldLegend>Address Information</FieldLegend>
			<FieldDescription>
				We need your address to deliver your order.
			</FieldDescription>
			<FieldGroup>
				<Field>
					<FieldLabel htmlFor="street">Street Address</FieldLabel>
					<Input id="street" type="text" placeholder="123 Main St" />
				</Field>
				<div className="grid grid-cols-2 gap-4">
					<Field>
						<FieldLabel htmlFor="city">City</FieldLabel>
						<Input id="city" type="text" placeholder="New York" />
					</Field>
					<Field>
						<FieldLabel htmlFor="zip">Postal Code</FieldLabel>
						<Input id="zip" type="text" placeholder="90502" />
					</Field>
				</div>
			</FieldGroup>
		</FieldSet>
	);
}

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

import { Checkbox } from "@/components/ui/checkbox";
import {
	Field,
	FieldContent,
	FieldDescription,
	FieldGroup,
	FieldLabel,
	FieldLegend,
	FieldSeparator,
	FieldSet,
} from "@/components/ui/field";

export function FieldCheckbox() {
	return (
		<FieldGroup className="w-full max-w-xs">
			<FieldSet>
				<FieldLegend variant="label">
					Show these items on the desktop
				</FieldLegend>
				<FieldDescription>
					Select the items you want to show on the desktop.
				</FieldDescription>
				<FieldGroup className="gap-3">
					<Field orientation="horizontal">
						<Checkbox id="finder-pref-9k2-hard-disks-ljj" defaultChecked />
						<FieldLabel
							htmlFor="finder-pref-9k2-hard-disks-ljj"
							className="font-normal"
						>
							Hard disks
						</FieldLabel>
					</Field>
					<Field orientation="horizontal">
						<Checkbox id="finder-pref-9k2-external-disks-1yg" />
						<FieldLabel
							htmlFor="finder-pref-9k2-external-disks-1yg"
							className="font-normal"
						>
							External disks
						</FieldLabel>
					</Field>
					<Field orientation="horizontal">
						<Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
						<FieldLabel
							htmlFor="finder-pref-9k2-cds-dvds-fzt"
							className="font-normal"
						>
							CDs, DVDs, and iPods
						</FieldLabel>
					</Field>
					<Field orientation="horizontal">
						<Checkbox id="finder-pref-9k2-connected-servers-6l2" />
						<FieldLabel
							htmlFor="finder-pref-9k2-connected-servers-6l2"
							className="font-normal"
						>
							Connected servers
						</FieldLabel>
					</Field>
				</FieldGroup>
			</FieldSet>
			<FieldSeparator />
			<Field orientation="horizontal">
				<Checkbox id="finder-pref-9k2-sync-folders-nep" defaultChecked />
				<FieldContent>
					<FieldLabel htmlFor="finder-pref-9k2-sync-folders-nep">
						Sync Desktop & Documents folders
					</FieldLabel>
					<FieldDescription>
						Your Desktop & Documents folders are being synced with iCloud Drive.
						You can access them from other devices.
					</FieldDescription>
				</FieldContent>
			</Field>
		</FieldGroup>
	);
}

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

import {
	Field,
	FieldDescription,
	FieldLabel,
	FieldLegend,
	FieldSet,
} from "@/components/ui/field";
import {
	RadioGroup,
	RadioGroupItem,
} from "@/components/ui/radio-group";

export function FieldRadio() {
	return (
		<FieldSet className="w-full max-w-xs">
			<FieldLegend variant="label">Subscription Plan</FieldLegend>
			<FieldDescription>
				Yearly and lifetime plans offer significant savings.
			</FieldDescription>
			<RadioGroup defaultValue="monthly">
				<Field orientation="horizontal">
					<RadioGroupItem value="monthly" id="plan-monthly" />
					<FieldLabel htmlFor="plan-monthly" className="font-normal">
						Monthly ($9.99/month)
					</FieldLabel>
				</Field>
				<Field orientation="horizontal">
					<RadioGroupItem value="yearly" id="plan-yearly" />
					<FieldLabel htmlFor="plan-yearly" className="font-normal">
						Yearly ($99.99/year)
					</FieldLabel>
				</Field>
				<Field orientation="horizontal">
					<RadioGroupItem value="lifetime" id="plan-lifetime" />
					<FieldLabel htmlFor="plan-lifetime" className="font-normal">
						Lifetime ($299.99)
					</FieldLabel>
				</Field>
			</RadioGroup>
		</FieldSet>
	);
}

Switch

import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

export function FieldSwitch() {
	return (
		<Field orientation="horizontal" className="w-fit">
			<FieldLabel htmlFor="2fa">Multi-factor authentication</FieldLabel>
			<Switch id="2fa" />
		</Field>
	);
}

Choice Card

Wrap Field components inside FieldLabel to create selectable field groups. This works with RadioItem, Checkbox and Switch components.

Compute Environment

Select the compute environment for your cluster.

import {
	Field,
	FieldContent,
	FieldDescription,
	FieldGroup,
	FieldLabel,
	FieldLegend,
	FieldSet,
	FieldTitle,
} from "@/components/ui/field";
import {
	RadioGroup,
	RadioGroupItem,
} from "@/components/ui/radio-group";

export function FieldChoiceCard() {
	return (
		<FieldGroup className="w-full max-w-xs">
			<FieldSet>
				<FieldLegend variant="label">Compute Environment</FieldLegend>
				<FieldDescription>
					Select the compute environment for your cluster.
				</FieldDescription>
				<RadioGroup variant="secondary" defaultValue="kubernetes">
					<FieldLabel htmlFor="kubernetes-r2h">
						<Field orientation="horizontal">
							<FieldContent>
								<FieldTitle>Kubernetes</FieldTitle>
								<FieldDescription>
									Run GPU workloads on a K8s cluster.
								</FieldDescription>
							</FieldContent>
							<RadioGroupItem value="kubernetes" id="kubernetes-r2h" />
						</Field>
					</FieldLabel>
					<FieldLabel htmlFor="vm-z4k">
						<Field orientation="horizontal">
							<FieldContent>
								<FieldTitle>Virtual Machine</FieldTitle>
								<FieldDescription>
									Access a cluster to run GPU workloads.
								</FieldDescription>
							</FieldContent>
							<RadioGroupItem value="vm" id="vm-z4k" />
						</Field>
					</FieldLabel>
				</RadioGroup>
			</FieldSet>
		</FieldGroup>
	);
}

Field Group

Stack Field components with FieldGroup. Add FieldSeparator to divide them.

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Get notified when tasks you've created have updates. Manage tasks

import { Checkbox } from "@/components/ui/checkbox";
import {
	Field,
	FieldDescription,
	FieldGroup,
	FieldLabel,
	FieldSeparator,
	FieldSet,
} from "@/components/ui/field";

export function FieldGroupExample() {
	return (
		<FieldGroup className="w-full max-w-xs">
			<FieldSet>
				<FieldLabel>Responses</FieldLabel>
				<FieldDescription>
					Get notified when ChatGPT responds to requests that take time, like
					research or image generation.
				</FieldDescription>
				<FieldGroup data-slot="checkbox-group">
					<Field orientation="horizontal">
						<Checkbox id="push" defaultChecked disabled />
						<FieldLabel htmlFor="push" className="font-normal">
							Push notifications
						</FieldLabel>
					</Field>
				</FieldGroup>
			</FieldSet>
			<FieldSeparator />
			<FieldSet>
				<FieldLabel>Tasks</FieldLabel>
				<FieldDescription>
					Get notified when tasks you've created have updates.{" "}
					<a href="#">Manage tasks</a>
				</FieldDescription>
				<FieldGroup data-slot="checkbox-group">
					<Field orientation="horizontal">
						<Checkbox id="push-tasks" />
						<FieldLabel htmlFor="push-tasks" className="font-normal">
							Push notifications
						</FieldLabel>
					</Field>
					<Field orientation="horizontal">
						<Checkbox id="email-tasks" />
						<FieldLabel htmlFor="email-tasks" className="font-normal">
							Email notifications
						</FieldLabel>
					</Field>
				</FieldGroup>
			</FieldSet>
		</FieldGroup>
	);
}

Responsive Layout

  • Vertical: Default orientation stacks label, control, and helper text.
  • Horizontal: Use orientation="horizontal" to place controls inline with labels.
  • Responsive: Use orientation="responsive" with FieldGroup container queries.
<FieldGroup className="@container/field-group flex flex-col gap-6">
  <Field orientation="responsive">
    <FieldContent>
      <FieldLabel htmlFor="name">Name</FieldLabel>
      <FieldDescription>Provide your full name.</FieldDescription>
    </FieldContent>
    <Input id="name" placeholder="Evil Rabbit" required />
  </Field>
</FieldGroup>

Validation and Errors

  • Add data-invalid on Field to style the full block as invalid.
  • Add aria-invalid on the control for assistive technologies.
  • Place FieldError after the control (or in FieldContent) for clear feedback.
<Field data-invalid>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid />
  <FieldError>Enter a valid email address.</FieldError>
</Field>

Accessibility

  • FieldSet and FieldLegend preserve semantic groupings for keyboard and screen reader users.
  • Field uses role="group" so labels/descriptions apply consistently to grouped controls.
  • Use FieldSeparator between larger sections to keep form structure clear.

RTL

طريقة الدفع

جميع المعاملات آمنة ومشفرة

أدخل رقم البطاقة المكون من 16 رقمًا

عنوان الفوترة

عنوان الفوترة المرتبط بطريقة الدفع الخاصة بك

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
	Field,
	FieldDescription,
	FieldGroup,
	FieldLabel,
	FieldLegend,
	FieldSeparator,
	FieldSet,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";

const months = [
	{ label: "MM", value: null },
	{ label: "01", value: "01" },
	{ label: "02", value: "02" },
	{ label: "03", value: "03" },
	{ label: "04", value: "04" },
	{ label: "05", value: "05" },
	{ label: "06", value: "06" },
	{ label: "07", value: "07" },
	{ label: "08", value: "08" },
	{ label: "09", value: "09" },
	{ label: "10", value: "10" },
	{ label: "11", value: "11" },
	{ label: "12", value: "12" },
];

const years = [
	{ label: "YYYY", value: null },
	{ label: "2024", value: "2024" },
	{ label: "2025", value: "2025" },
	{ label: "2026", value: "2026" },
	{ label: "2027", value: "2027" },
	{ label: "2028", value: "2028" },
	{ label: "2029", value: "2029" },
];

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			paymentMethod: "Payment Method",
			secureTransactions: "All transactions are secure and encrypted",
			nameOnCard: "Name on Card",
			cardNumber: "Card Number",
			cardNumberDescription: "Enter your 16-digit card number",
			month: "Month",
			year: "Year",
			cvv: "CVV",
			monthPlaceholder: "MM",
			billingAddress: "Billing Address",
			billingAddressDescription:
				"The billing address associated with your payment method",
			sameAsShipping: "Same as shipping address",
			comments: "Comments",
			commentsPlaceholder: "Add any additional comments",
			submit: "Submit",
			cancel: "Cancel",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			paymentMethod: "طريقة الدفع",
			secureTransactions: "جميع المعاملات آمنة ومشفرة",
			nameOnCard: "الاسم على البطاقة",
			cardNumber: "رقم البطاقة",
			cardNumberDescription: "أدخل رقم البطاقة المكون من 16 رقمًا",
			month: "الشهر",
			year: "السنة",
			cvv: "CVV",
			monthPlaceholder: "ش.ش",
			billingAddress: "عنوان الفوترة",
			billingAddressDescription: "عنوان الفوترة المرتبط بطريقة الدفع الخاصة بك",
			sameAsShipping: "نفس عنوان الشحن",
			comments: "تعليقات",
			commentsPlaceholder: "أضف أي تعليقات إضافية",
			submit: "إرسال",
			cancel: "إلغاء",
		},
	},
	he: {
		dir: "rtl",
		values: {
			paymentMethod: "אמצעי תשלום",
			secureTransactions: "כל העסקאות מאובטחות ומוצפנות",
			nameOnCard: "שם על הכרטיס",
			cardNumber: "מספר כרטיס",
			cardNumberDescription: "הזן את מספר הכרטיס בן 16 הספרות שלך",
			month: "חודש",
			year: "שנה",
			cvv: "CVV",
			monthPlaceholder: "MM",
			billingAddress: "כתובת חיוב",
			billingAddressDescription: "כתובת החיוב המשויכת לאמצעי התשלום שלך",
			sameAsShipping: "זהה לכתובת המשלוח",
			comments: "הערות",
			commentsPlaceholder: "הוסף הערות נוספות",
			submit: "שלח",
			cancel: "בטל",
		},
	},
};

export function FieldRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	const getMonthLabel = (value: string | null): string => {
		if (value === null) return t.monthPlaceholder;
		return value;
	};

	return (
		<div className="w-full max-w-md py-6" lang={language} dir={dir}>
			<form>
				<FieldGroup>
					<FieldSet>
						<FieldLegend>{t.paymentMethod}</FieldLegend>
						<FieldDescription>{t.secureTransactions}</FieldDescription>
						<FieldGroup>
							<Field>
								<FieldLabel htmlFor="checkout-card-name-rtl">
									{t.nameOnCard}
								</FieldLabel>
								<Input
									id="checkout-card-name-rtl"
									placeholder="Evil Rabbit"
									required
								/>
							</Field>
							<Field>
								<FieldLabel htmlFor="checkout-card-number-rtl">
									{t.cardNumber}
								</FieldLabel>
								<Input
									id="checkout-card-number-rtl"
									placeholder="1234 5678 9012 3456"
									required
								/>
								<FieldDescription>{t.cardNumberDescription}</FieldDescription>
							</Field>
							<div className="grid grid-cols-3 gap-4">
								<Field>
									<FieldLabel htmlFor="checkout-exp-month-rtl">
										{t.month}
									</FieldLabel>
									<Select items={months}>
										<SelectTrigger id="checkout-exp-month-rtl">
											<SelectValue />
										</SelectTrigger>
										<SelectContent dir={dir}>
											<SelectGroup>
												{months.map((item, index) => (
													<SelectItem
														key={`${item.value}-${index}`}
														value={item.value}
													>
														{getMonthLabel(item.value)}
													</SelectItem>
												))}
											</SelectGroup>
										</SelectContent>
									</Select>
								</Field>
								<Field>
									<FieldLabel htmlFor="checkout-exp-year-rtl">
										{t.year}
									</FieldLabel>
									<Select items={years}>
										<SelectTrigger id="checkout-exp-year-rtl">
											<SelectValue />
										</SelectTrigger>
										<SelectContent dir={dir}>
											<SelectGroup>
												{years.map((item, index) => (
													<SelectItem
														key={`${item.value}-${index}`}
														value={item.value}
													>
														{item.label}
													</SelectItem>
												))}
											</SelectGroup>
										</SelectContent>
									</Select>
								</Field>
								<Field>
									<FieldLabel htmlFor="checkout-cvv-rtl">{t.cvv}</FieldLabel>
									<Input id="checkout-cvv-rtl" placeholder="123" required />
								</Field>
							</div>
						</FieldGroup>
					</FieldSet>
					<FieldSeparator />
					<FieldSet>
						<FieldLegend>{t.billingAddress}</FieldLegend>
						<FieldDescription>{t.billingAddressDescription}</FieldDescription>
						<FieldGroup>
							<Field orientation="horizontal">
								<Checkbox id="same-as-shipping-rtl" defaultChecked />
								<FieldLabel
									htmlFor="same-as-shipping-rtl"
									className="font-normal"
								>
									{t.sameAsShipping}
								</FieldLabel>
							</Field>
						</FieldGroup>
					</FieldSet>
					<FieldSet>
						<FieldGroup>
							<Field>
								<FieldLabel htmlFor="checkout-comments-rtl">
									{t.comments}
								</FieldLabel>
								<Textarea
									id="checkout-comments-rtl"
									placeholder={t.commentsPlaceholder}
									className="resize-none"
								/>
							</Field>
						</FieldGroup>
					</FieldSet>
					<Field orientation="horizontal">
						<Button type="submit">{t.submit}</Button>
						<Button variant="outline" type="button">
							{t.cancel}
						</Button>
					</Field>
				</FieldGroup>
			</form>
		</div>
	);
}

API Reference

FieldSet

PropTypeDefault

FieldLegend

PropTypeDefault
classNamestring
—

FieldGroup

PropTypeDefault

Field

PropTypeDefault
classNamestring
—

FieldContent

PropTypeDefault

FieldLabel

PropTypeDefault
classNamestring
—

FieldTitle

PropTypeDefault

FieldDescription

PropTypeDefault

FieldSeparator

PropTypeDefault

FieldError

PropTypeDefault
classNamestring
—