---
title: Field
description: Accessible form layout for labels, hints, and errors.
group: Components
order: 37
---

Bring labels, controls, help text, and errors together in accessible fields and groups.

```tsx
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 {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"
import { Textarea } from "@/components/ui/textarea"

export function Example() {
  return (
    <form className="flex w-full flex-col gap-6">
      <FieldSet>
        <FieldLegend>Payment Method</FieldLegend>
        <FieldDescription>
          All transactions are secure and encrypted.
        </FieldDescription>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="name-on-card">Name on Card</FieldLabel>
            <Input id="name-on-card" placeholder="Jane Doe" autoComplete="off" />
          </Field>
          <Field>
            <FieldLabel htmlFor="card-number">Card Number</FieldLabel>
            <Input
              id="card-number"
              placeholder="ACCT-000035"
              autoComplete="off"
            />
            <FieldDescription>
              Enter your 16-digit card number.
            </FieldDescription>
          </Field>
          <div className="grid gap-4 sm:grid-cols-3">
            <Field>
              <FieldLabel htmlFor="month">Month</FieldLabel>
              <NativeSelect id="month" defaultValue="">
                <NativeSelectOption value="" disabled>
                  MM
                </NativeSelectOption>
                <NativeSelectOption value="01">01</NativeSelectOption>
                <NativeSelectOption value="06">06</NativeSelectOption>
                <NativeSelectOption value="12">12</NativeSelectOption>
              </NativeSelect>
            </Field>
            <Field>
              <FieldLabel htmlFor="year">Year</FieldLabel>
              <NativeSelect id="year" defaultValue="">
                <NativeSelectOption value="" disabled>
                  YYYY
                </NativeSelectOption>
                <NativeSelectOption value="2026">2026</NativeSelectOption>
                <NativeSelectOption value="2027">2027</NativeSelectOption>
                <NativeSelectOption value="2028">2028</NativeSelectOption>
              </NativeSelect>
            </Field>
            <Field>
              <FieldLabel htmlFor="cvv">CVV</FieldLabel>
              <Input id="cvv" placeholder="123" autoComplete="off" />
            </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>
          <Field>
            <FieldLabel htmlFor="comments">Comments</FieldLabel>
            <Textarea
              id="comments"
              placeholder="Add any extra notes..."
              className="min-h-20"
            />
          </Field>
        </FieldGroup>
      </FieldSet>
      <div className="flex justify-end gap-2">
        <Button type="button" variant="secondary">
          Cancel
        </Button>
        <Button type="button">Submit</Button>
      </div>
    </form>
  )
}
```

## Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add field
```

## Usage

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

```tsx
<FieldSet>
  <FieldLegend>Payment method</FieldLegend>
  <FieldDescription>Card details are encrypted in transit.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Name on card</FieldLabel>
      <Input id="name" placeholder="Jordan Lee" />
    </Field>
  </FieldGroup>
</FieldSet>
```

## Composition

### Field

```tree
Field
├── FieldLabel
├── Input / Textarea / Switch / NativeSelect
├── FieldDescription
└── FieldError
```

### FieldGroup

```tree
FieldGroup
├── Field
├── FieldSeparator
└── Field
```

### FieldSet

```tree
FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    └── Field
```

## Input

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

export function Example() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="username">Username</FieldLabel>
        <Input id="username" placeholder="your-username" autoComplete="off" />
        <FieldDescription>
          Choose a unique username for your account.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel htmlFor="password">Password</FieldLabel>
        <Input id="password" type="password" placeholder="••••••••" />
        <FieldDescription>
          Must be at least 8 characters long.
        </FieldDescription>
      </Field>
    </FieldGroup>
  )
}
```

## Textarea

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="feedback">Feedback</FieldLabel>
      <Textarea
        id="feedback"
        placeholder="Share your thoughts..."
        className="min-h-24"
      />
      <FieldDescription>
        Share your thoughts about our service.
      </FieldDescription>
    </Field>
  )
}
```

## Native Select

Use [Native Select](/docs/components/native-select) when the field needs a select control.

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="department">Department</FieldLabel>
      <NativeSelect id="department" defaultValue="" className="w-full">
        <NativeSelectOption value="" disabled>
          Choose department
        </NativeSelectOption>
          <NativeSelectOption value="engineering">
            Engineering
          </NativeSelectOption>
        <NativeSelectOption value="design">Design</NativeSelectOption>
        <NativeSelectOption value="marketing">Marketing</NativeSelectOption>
      </NativeSelect>
      <FieldDescription>
        Select your department or area of work.
      </FieldDescription>
    </Field>
  )
}
```

## Slider

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Slider } from "@/components/ui/slider"

export function Example() {
  return (
    <Field>
      <FieldLabel>Price Range</FieldLabel>
      <Slider defaultValue={[200, 800]} min={0} max={1000} step={10} />
      <FieldDescription>
        Set your budget range ($200 - 800).
      </FieldDescription>
    </Field>
  )
}
```

## Fieldset

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

export function Example() {
  return (
    <FieldSet>
      <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" placeholder="123 Main St" autoComplete="off" />
        </Field>
        <div className="grid gap-4 sm:grid-cols-2">
          <Field>
            <FieldLabel htmlFor="city">City</FieldLabel>
            <Input id="city" placeholder="San Francisco" autoComplete="off" />
          </Field>
          <Field>
            <FieldLabel htmlFor="postal">Postal Code</FieldLabel>
            <Input id="postal" placeholder="94103" autoComplete="off" />
          </Field>
        </div>
      </FieldGroup>
    </FieldSet>
  )
}
```

## Checkbox

```tsx
import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"

export function Example() {
  return (
    <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="hard-disks" defaultChecked />
          <FieldLabel htmlFor="hard-disks" className="font-normal">
            Hard disks
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="external-disks" />
          <FieldLabel htmlFor="external-disks" className="font-normal">
            External disks
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="cds" />
          <FieldLabel htmlFor="cds" className="font-normal">
            CDs, DVDs, and iPods
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="servers" />
          <FieldLabel htmlFor="servers" className="font-normal">
            Connected servers
          </FieldLabel>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}
```

## Radio

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

export function Example() {
  return (
    <FieldSet>
      <FieldLegend variant="label">Subscription Plan</FieldLegend>
      <FieldDescription>
        Yearly and lifetime plans offer significant savings.
      </FieldDescription>
      <RadioGroup defaultValue="yearly" className="gap-3">
        <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

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

export function Example() {
  return (
    <Field orientation="horizontal">
      <FieldLabel htmlFor="mfa">Multi-factor authentication</FieldLabel>
      <Switch id="mfa" />
    </Field>
  )
}
```

## Choice Card

Place `Field` inside `FieldLabel` to create a selectable card. This works with radios, checkboxes, and switches.

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

export function Example() {
  return (
    <FieldSet>
      <FieldLegend variant="label">Compute Environment</FieldLegend>
      <FieldDescription>
        Select the compute environment for your cluster.
      </FieldDescription>
      <RadioGroup defaultValue="kubernetes" className="gap-3">
        <FieldLabel htmlFor="env-k8s">
          <Field orientation="horizontal">
            <RadioGroupItem value="kubernetes" id="env-k8s" />
            <FieldContent>
              <FieldTitle>Kubernetes</FieldTitle>
              <FieldDescription>
                Run GPU workloads on a K8s cluster.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel htmlFor="env-vm">
          <Field orientation="horizontal">
            <RadioGroupItem value="vm" id="env-vm" />
            <FieldContent>
              <FieldTitle>Virtual Machine</FieldTitle>
              <FieldDescription>
                Access a cluster to run GPU workloads.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
      </RadioGroup>
    </FieldSet>
  )
}
```

## Field Group

Stack related fields with `FieldGroup`, and use `FieldSeparator` between sections.

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

export function Example() {
  return (
    <FieldGroup>
      <FieldSet>
        <FieldLegend variant="label">Responses</FieldLegend>
        <FieldDescription>
          Get notified when ChatGPT responds to requests that take time, like
          research or image generation.
        </FieldDescription>
        <FieldGroup className="gap-3">
          <Field orientation="horizontal">
            <Checkbox id="push-responses" defaultChecked />
            <FieldLabel htmlFor="push-responses" className="font-normal">
              Push notifications
            </FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSeparator />
      <FieldSet>
        <FieldLegend variant="label">Tasks</FieldLegend>
        <FieldDescription>
          Get notified when tasks you've created have updates.
        </FieldDescription>
        <FieldGroup className="gap-3">
          <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" defaultChecked />
            <FieldLabel htmlFor="email-tasks" className="font-normal">
              Email notifications
            </FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
    </FieldGroup>
  )
}
```

## Stacked Layout

By default, fields stack the label, control, and helper text. Use `orientation="horizontal"` when the control belongs beside the label, as with switches and checkboxes.

```tsx
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"

export function Example() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="stack-name">Name</FieldLabel>
        <Input id="stack-name" placeholder="Jane Doe" />
        <FieldDescription>
          Provide your full name for identification.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel htmlFor="stack-email">Email</FieldLabel>
        <Input id="stack-email" type="email" placeholder="jane@example.com" />
      </Field>
      <Field orientation="horizontal">
        <FieldLabel htmlFor="stack-newsletter">
          Subscribe to the newsletter
        </FieldLabel>
        <Switch id="stack-newsletter" defaultChecked />
      </Field>
      <div className="flex justify-end gap-2">
        <Button type="button" variant="secondary">
          Cancel
        </Button>
        <Button type="button">Submit</Button>
      </div>
    </FieldGroup>
  )
}
```

## Validation and Errors

- Add `data-invalid` to `Field` for error styling.
- Add `aria-invalid` on the control.
- Render `FieldError` after the control.

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

export function Example() {
  return (
    <Field data-invalid>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input
        id="email"
        type="email"
        defaultValue="not-an-email"
        aria-invalid
      />
      <FieldError>Enter a valid email address.</FieldError>
    </Field>
  )
}
```

## API Reference

### FieldSet

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

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

### FieldLegend

| Prop | Type | Default |
| --- | --- | --- |
| variant | "legend" \| "label" | "legend" |
| className | string | — |

```tsx
  <FieldLegend variant="label">Notification preferences</FieldLegend>
```

### FieldGroup

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

```tsx
<FieldGroup>
  <Field>{/* ... */}</Field>
  <Field>{/* ... */}</Field>
</FieldGroup>
```

### Field

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

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

### FieldContent

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

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

### FieldLabel

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |
| htmlFor | string | — |

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

### FieldTitle

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

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

### FieldDescription

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

```tsx
<FieldDescription>We’ll only use this for account updates.</FieldDescription>
```

### FieldSeparator

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

```tsx
<FieldSeparator>Or continue with</FieldSeparator>
```

### FieldError

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

```tsx
<FieldError>Enter a valid email address.</FieldError>
```

```tsx
<FieldError errors={[{ message: "Required" }]} />
```

## Source

```tsx
"use client";

import { useMemo, type ComponentProps, type ReactNode } from "react";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type FieldOrientation = "vertical" | "horizontal" | "responsive";

const fieldOrientationClass: Record<FieldOrientation, string> = {
  vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
  horizontal:
    "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
  responsive:
    "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
};

function FieldSet({ className, ...props }: ComponentProps<"fieldset">) {
  return (
    <fieldset
      data-slot="field-set"
      className={cn(
        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
        className,
      )}
      {...props}
    />
  );
}

function FieldLegend({
  className,
  variant = "legend",
  ...props
}: ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
  return (
    <legend
      data-slot="field-legend"
      data-variant={variant}
      className={cn(
        "mb-1.5 font-medium tracking-wide data-[variant=label]:text-sm data-[variant=legend]:text-base",
        className,
      )}
      {...props}
    />
  );
}

function FieldGroup({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="field-group"
      className={cn(
        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
        className,
      )}
      {...props}
    />
  );
}

function Field({
  className,
  orientation = "vertical",
  ...props
}: ComponentProps<"div"> & {
  orientation?: FieldOrientation;
}) {
  return (
    <div
      role="group"
      data-slot="field"
      data-orientation={orientation}
      className={cn(
        "group/field flex w-full gap-2 data-[invalid]:text-destructive data-[invalid=true]:text-destructive",
        fieldOrientationClass[orientation],
        className,
      )}
      {...props}
    />
  );
}

function FieldContent({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="field-content"
      className={cn(
        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
        className,
      )}
      {...props}
    />
  );
}

function FieldLabel({ className, ...props }: ComponentProps<typeof Label>) {
  return (
    <Label
      data-slot="field-label"
      className={cn(
        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:border-border *:data-[slot=field]:p-2.5",
        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
        className,
      )}
      {...props}
    />
  );
}

function FieldTitle({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="field-label"
      className={cn(
        "flex w-fit items-center gap-2 text-sm font-medium tracking-wide group-data-[disabled=true]/field:opacity-50",
        className,
      )}
      {...props}
    />
  );
}

function FieldDescription({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="field-description"
      className={cn(
        "text-left text-sm leading-normal font-normal tracking-wide text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
        "last:mt-0 nth-last-2:-mt-1",
        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
        className,
      )}
      {...props}
    />
  );
}

function FieldSeparator({
  children,
  className,
  ...props
}: ComponentProps<"div"> & {
  children?: ReactNode;
}) {
  return (
    <div
      data-slot="field-separator"
      data-content={!!children}
      className={cn(
        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
        className,
      )}
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
      {children ? (
        <span
          className="relative mx-auto block w-fit bg-surface px-2 text-muted-foreground"
          data-slot="field-separator-content"
        >
          {children}
        </span>
      ) : null}
    </div>
  );
}

function FieldError({
  className,
  children,
  errors,
  ...props
}: ComponentProps<"div"> & {
  errors?: Array<{ message?: string } | undefined>;
}) {
  const content = useMemo(() => {
    if (children) return children;
    if (!errors?.length) return null;

    const uniqueErrors = [
      ...new Map(errors.map((error) => [error?.message, error])).values(),
    ];

    if (uniqueErrors.length === 1) {
      return uniqueErrors[0]?.message;
    }

    return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {uniqueErrors.map(
          (error, index) =>
            error?.message ? <li key={index}>{error.message}</li> : null,
        )}
      </ul>
    );
  }, [children, errors]);

  if (!content) return null;

  return (
    <div
      role="alert"
      data-slot="field-error"
      className={cn("text-sm font-normal tracking-wide text-destructive", className)}
      {...props}
    >
      {content}
    </div>
  );
}

export {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldContent,
  FieldTitle,
};
export type { FieldOrientation };
```