Payment Method

All transactions are secure and encrypted

Name on Card

Card Number

Enter your 16-digit card number

Month

Year

CVV

Billing Address

The billing address associated with your payment method

Same as shipping address

Comments

Installation

pnpm dlx shadcn-vue@latest add field

Usage

<script setup lang="ts">
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field"
</script>

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

Anatomy

The Field family is designed for composing accessible forms. A typical field is structured as follows:

<template>
  <Field>
    <FieldLabel for="input-id">Label</FieldLabel>
    <!-- Input, Select, Switch, etc. -->
    <FieldDescription>Optional helper text.</FieldDescription>
    <FieldError>Validation message.</FieldError>
  </Field>
</template>

• Field is the core wrapper for a single field.
• FieldContent is a flex column that groups label and description. Not required if you have no description.
• Wrap related fields with FieldGroup, and use FieldSet with FieldLegend for semantic grouping.

Examples

Input

Username

Choose a unique username for your account.

Password

Must be at least 8 characters long.

Textarea

Feedback

Share your thoughts about our service.

Select

Department

Select your department or area of work.

Slider

Price Range

Set your budget range ($ 200 - 800).

Fieldset

Address Information

We need your address to deliver your order.

Street Address

City

Postal Code

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.

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

Switch

Multi-factor authentication

Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.

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.

Kubernetes

Run GPU workloads on a K8s configured cluster.

Virtual Machine

Access a VM configured cluster to run GPU workloads.

Field Group

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

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

Responsive Layout

If you are in tailwindcss v3 you need to install @tailwindcss/container-queries

• Vertical fields: Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
• Horizontal fields: Set orientation="horizontal" on Field to align the label and control side-by-side. Pair with FieldContent to keep descriptions aligned.
• Responsive fields: Set orientation="responsive" for automatic column layouts inside container-aware parents. Apply @container/field-group classes on FieldGroup to switch orientations at specific breakpoints.

Profile

Fill in your profile information.

Name

Provide your full name for identification

Message

You can write your message here. Keep it short, preferably under 100 characters.

Validation and Errors

• Add data-invalid to Field to switch the entire block into an error state.
• Add aria-invalid on the input itself for assistive technologies.
• Render FieldError immediately after the control or inside FieldContent to keep error messages aligned with the field.

<template>
  <Field data-invalid>
    <FieldLabel for="email">Email</FieldLabel>
    <Input id="email" type="email" aria-invalid />
    <FieldError>Enter a valid email address.</FieldError>
  </Field>
<template>

Accessibility

• FieldSet and FieldLegend keep related controls grouped for keyboard and assistive tech users.
• Field outputs role="group" so nested controls inherit labeling from FieldLabel and FieldLegend when combined.
• Apply FieldSeparator sparingly to ensure screen readers encounter clear section boundaries.

API Reference

FieldSet

Container that renders a semantic fieldset with spacing presets.

Prop	Type	Default
class	string

<template>
  <FieldSet>
    <FieldLegend>Delivery</FieldLegend>
    <FieldGroup>
        <!-- Fields -->
    </FieldGroup>
  </FieldSet>
</template>

FieldLegend

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

Prop	Type	Default
variant	"legend" | "label"	"legend"
class	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
class	string

<template>
  <FieldGroup class="@container/field-group flex flex-col gap-6">
    <Field><!-- Fields --></Field>
    <Field><!-- Fields --></Field>
  </FieldGroup>
</template>

Field

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

Prop	Type	Default
orientation	"vertical" | "horizontal" | "responsive"	"vertical"
class	string
data-invalid	boolean

<Field orientation="horizontal">
  <FieldLabel for="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
class	string

<Field>
  <Checkbox id="notifications" />
  <FieldContent>
    <FieldLabel for="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
class	string
asChild	boolean	false

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

FieldTitle

Renders a title with label styling inside FieldContent.

Prop	Type	Default
class	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
class	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
class	string

<FieldSeparator>Or continue with</FieldSeparator>

FieldError

Accessible error container that accepts children or an errors array (e.g., from vee-validate).

Prop	Type	Default
errors	Array<{ message?: string } | undefined>
class	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.