# Field Lays out a control with its label, description and error. > Every page: https://constella.aayush.cv/llms.txt ```tsx ``` ## Installation ```bash npx shadcn@latest add @constella/field ``` ## Usage ```tsx import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldSetDescription, FieldTitle, } from "@/components/primitives/field"; ``` ```tsx Label {/* control */} Helper text. ``` The label, description and error link to the control inside the `Field` on their own, so no `id` or `htmlFor` is needed. ## Composition ``` FieldSet ├── FieldLegend ├── FieldSetDescription └── FieldGroup ├── Field │ ├── FieldLabel │ ├── FieldContent │ │ ├── FieldTitle │ │ └── FieldDescription │ └── FieldError └── FieldSeparator ``` ## Orientation Use `orientation="horizontal"` to put the control beside its label, as for a checkbox. Wrap the label and description in `FieldContent` to stack them. ```tsx Accept terms and conditions By clicking this checkbox, you agree to the terms. ``` ## Fieldset Group related fields in a `FieldSet` with a `FieldLegend`. Use `variant="label"` for a legend the size of a label, and `FieldSetDescription` for its helper text. ```tsx

Show these items on the desktop Select the items you want to show on the desktop. Hard disks Connected servers

``` ## Field Group Stack fieldsets in a `FieldGroup`, with a `FieldSeparator` between them. Pass it text to label the break. ```tsx

Responses Push notifications

Tasks Email notifications

``` ## Choice Card Put the control and a `FieldContent` inside the `FieldLabel` to turn the whole label into a card that toggles it. Use `FieldTitle` for its heading. ```tsx Enable notifications You can enable or disable notifications at any time. ``` ### Card Put the cards in a `FieldGroup` directly inside a `flush` [Card](https://constella.aayush.cv/docs/components/card/index.md) to list them as rows of one card, split by hairlines. A settings page lists its switches this way. ```tsx Mentions When someone @mentions you. ``` ## Error Use the `invalid` prop to mark the field, and `FieldError` for the message. `match` shows it always; leave it out to show it only when Base UI's validation fails. With a form library, pass its errors to `errors` instead: each message shows once, several as a list, and nothing renders when there are none. ```tsx ``` ```tsx Accept terms and conditions You must accept the terms to continue. ``` ## Disabled Use the `disabled` prop on `Field` to disable its control and dim its label. ```tsx Enable notifications ``` ## Input ```tsx Username Choose a unique username for your account. ``` ## Textarea ```tsx Feedback

<FieldDescription>Share your thoughts about our service.</FieldDescription>
</Field>
```

## Select

```tsx
<Field>
  <FieldLabel>Department</FieldLabel>
  <Select items={departments}>
    <SelectTrigger>
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="engineering">Engineering</SelectItem>
    </SelectContent>
  </Select>
  <FieldDescription>Select your department or area of work.</FieldDescription>
</Field>
```

## Slider

Use `FieldTitle` for a control that isn't labelled by a `<label>`.

```tsx
<Field>
  <FieldTitle>Price Range</FieldTitle>
  <FieldDescription>
    Set your budget range (${range[0]} - {range[1]}).
  </FieldDescription>
  <Slider
    aria-label="Price Range"
    max={1000}
    onValueChange={setRange}
    value={range}
  />
</Field>
```

## Radio Group

```tsx
<FieldSet>
  <FieldLegend variant="label">Subscription Plan</FieldLegend>
  <RadioGroup defaultValue="monthly">
    <Field orientation="horizontal">
      <RadioGroupItem value="monthly" />
      <FieldLabel>Monthly ($9.99/month)</FieldLabel>
    </Field>
  </RadioGroup>
</FieldSet>
```

## Switch

```tsx
<Field orientation="horizontal">
  <FieldLabel>Multi-factor authentication</FieldLabel>
  <Switch />
</Field>
```

## API Reference

`Field` adds `orientation` (`"vertical"`, the default, or `"horizontal"`) `FieldLegend` adds `variant` (`"legend"`, the default, or `"label"`) and `FieldError` adds `errors` (an array of `{ message }`, in place of `match`). `FieldTitle` takes `render`. `FieldGroup`, `FieldContent` and `FieldSetDescription` are plain elements. `FieldSeparator` draws a line, broken by its children when it has any. Every part takes `sx`, applied last. For the rest, see [Base UI Field](https://base-ui.com/react/components/field) and [Fieldset](https://base-ui.com/react/components/fieldset).