Fieldset

A group of controls that answer one question together, with a name on it. It groups the controls without drawing a surface of its own.

import { Fieldset, TextField } from 'neba';

<Fieldset legend="Billing address" description="Where the card statement goes.">
  <TextField label="Street" name="street" />
  <TextField label="City" name="city" />
</Fieldset>;

Props

Prop	Type	Default	Description
legend	ReactNode	—	What the group is called. It becomes the accessible name of every control inside, so it has to read correctly in front of each of them
description	ReactNode	—	A line under the legend
disabled	boolean	false	Disables every control inside at once, the way only a real fieldset can
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The type scale of the legend and the gap between the controls. It does not reach the controls themselves
children	ReactNode	—	The controls being grouped

Every native <fieldset> attribute passes through, apart from color. The browser's own border, padding and margin are cleared: for a surface, put this inside a Card or a Box.

Examples

legend · description

The legend becomes the accessible name of every control inside, so it has to be a phrase that still reads correctly in front of each of them: "Billing address", not "Where should we send it?". description is a line under it.

disabled

The one thing only a real <fieldset> can do: it reaches every control inside, including ones a component three levels down rendered and never heard of it.

import { useState } from 'react';
import { Checkbox, Fieldset, TextField } from 'neba';

export default function FieldsetDisabled() {
  const [custom, setCustom] = useState(false);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Checkbox label="Ship to a different address" checked={custom} onCheckedChange={setCustom} />
      <Fieldset legend="Delivery address" disabled={!custom}>
        <TextField label="Street" name="ship-street" />
        <TextField label="City" name="ship-city" />
      </Fieldset>
    </div>
  );
}

size

size is the type scale of the legend and the gap the controls stand at. It does not reach the controls themselves: a group of sm fields is written as sm fields.

import { Fieldset, TextField } from 'neba';

const sizes = ['sm', 'md', 'lg'] as const;

export default function FieldsetSizes() {
  return (
    <div className="grid w-full max-w-3xl grid-cols-1 gap-6 sm:grid-cols-3">
      {sizes.map((size) => (
        <Fieldset key={size} size={size} legend={size} description="Legend and gap.">
          <TextField size={size} label="Street" name={`${size}-street`} />
          <TextField size={size} label="City" name={`${size}-city`} />
        </Fieldset>
      ))}
    </div>
  );
}

Accessibility

• Renders a real <fieldset> with role="group", named by the legend through aria-labelledby.
• A screen reader reads the legend before each control inside, which is why the legend is written as a phrase rather than a question.