Field

Compose accessible form fields with labels, descriptions, and validation.

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldDescription,
  FieldGroup,

Installation


$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/field.json

Usage

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

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" />
  <FieldDescription>We never share your email.</FieldDescription>
</Field>

Composition

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    └── Field
        ├── FieldLabel
        ├── (control)
        └── FieldDescription

Examples

Input

Username

Choose a unique username for your account.

Password

Must be at least 8 characters long.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSet,

Textarea

Feedback

Share your thoughts about our service.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSet,

Select

Department

Select your department or area of work.

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

Slider

Price Range

Set your budget range ($200 - 800).

"use client";

import { useState } from "react";

import {
  Field,

Fieldset

Address Information

We need your address to deliver your order.

Street Address

City

Postal Code

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Sync Desktop & Documents folders

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,

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,

Switch

Multi-factor authentication

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

export function FieldSwitch() {
  return (
    <Field className="w-fit" orientation="horizontal">

Choice Card

Compute Environment

Select the compute environment for your cluster.

Kubernetes

Run GPU workloads on a K8s cluster.

Virtual Machine

Access a cluster to run GPU workloads.

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,

Field Group

Responses

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

Push notifications

Tasks

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

Push notifications

Email notifications

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

Responsive Layout

Use orientation="responsive" to stack the label and control on small screens and place them side by side on larger screens.

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,

RTL

To enable right-to-left support, see the RTL guide.

معلومات العنوان

نحتاج إلى عنوانك لتوصيل طلبك.

الاسم الكامل

أدخل اسمك الكامل لتحديد الهوية.

عنوان الشارع

"use client";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";
import {
  Field,

API Reference

FieldSet

Container that renders a semantic fieldset with spacing presets.

Prop	Type	Default
`className`	`string`	-

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`	-

FieldGroup

Layout wrapper that stacks Field components.

Prop	Type	Default
`className`	`string`	-

Field

The core wrapper for a single field. Provides orientation control and spacing.

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

FieldContent

Flex column that groups the control and descriptions when the label sits beside the control.

Prop	Type	Default
`className`	`string`	-

FieldLabel

Label styled for both direct inputs and nested Field children.

Prop	Type	Default
`className`	`string`	-

FieldTitle

Renders a title with label styling inside FieldContent.

Prop	Type	Default
`className`	`string`	-

FieldDescription

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

Prop	Type	Default
`className`	`string`	-

FieldSeparator

A separator between fields, with optional content rendered in the middle.

Prop	Type	Default
`children`	`React.ReactNode`	-
`className`	`string`	-

FieldError

Displays validation errors. Pass children or an errors array.

Prop	Type	Default
`errors`	`Array<{ message?: string } \| undefined>`	-
`children`	`React.ReactNode`	-

Empty Hover Card

Edit this page Follow @shadcnlabs Join community