Fields

Fieldset

A native border and name for a related set of controls.

When to use it: Use it for a group of choices such as contact methods.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

DeliveryLeave at the door

Fieldset.tsxtsx

import { Checkbox, Fieldset, Legend } from "@comp0/react";

export function Example() {
  return (
    <Fieldset className="flex max-w-xs flex-col gap-2 rounded border border-zinc-950/10 p-3 dark:border-white/10">
      <Legend className="px-1 text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100">
        Delivery
      </Legend>
      <Checkbox
        className="flex min-h-7 items-center gap-2 rounded px-1 text-base text-zinc-800 data-selected:bg-teal-50 data-selected:text-teal-950 sm:text-sm dark:text-zinc-100 dark:data-selected:bg-teal-950/40 dark:data-selected:text-teal-50"
        defaultChecked
        name="leave-at-door"
      >
        <span className="size-5 shrink-0 rounded-sm border border-zinc-950/20 bg-white sm:size-4 dark:border-white/20 dark:bg-zinc-900" />
        Leave at the door
      </Checkbox>
    </Fieldset>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Fieldset
Native fieldset that groups related controls. Owns a DOM element.
Legend
Native fieldset caption. Owns a DOM element.

Step by step

1
Add the main part
Wrap related controls in Fieldset.
2
Add the supporting parts
Put one short Legend first to name the group.
3
Make the behavior clear
Use disabled, invalid, or required on the group when that rule applies to all children.
Exampletsx
```
<Fieldset><Legend>Contact choices</Legend></Fieldset>
```

Keyboard

Forms and accessibility

Fieldset itself has no value; its named child controls submit normally.

Accessibility checklist

Put Legend first so the group has a name.
Use it for related controls, not for decorative borders.
Keep individual choices labelled too.

API reference

Importtsx

import { Fieldset, Legend } from "@comp0/react";

`Fieldset`

DOM element

Native fieldset that groups related controls.

Prop	Type	Description
`disabled`	`boolean`	Natively disables every control inside.
`invalid / required`	`boolean`	Group-wide states exposed as data attributes.

`Legend`

DOM element

Native fieldset caption.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-disabled] on Fieldset: The whole group is disabled.
[data-invalid] on Fieldset: The group is invalid.
[data-required] on Fieldset: The group is required.