Fieldset

Native <fieldset> + <legend> wrapper for grouping related form controls; disabling the fieldset cascades to every nested control.

stable
since v0.1.0
0.47 kB
forms

Preview

Open

tsx

import { Fieldset, Input, Stack } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Fieldset legend="Contact details">
      <Stack gap="3" style={{ width: 320 }}>
        <Input placeholder="Full name" aria-label="Full name" />
        <Input type="email" placeholder="Email" aria-label="Email" />
      </Stack>
    </Fieldset>
  );
}

With legend

The legend prop accepts any node — text, an inline icon, or a heading.

Preview

Open

tsx

import { Fieldset, Input, Stack } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Fieldset legend="Shipping address">
      <Stack gap="3" style={{ width: 360 }}>
        <Input placeholder="Street" aria-label="Street" />
        <Input placeholder="City" aria-label="City" />
        <Input placeholder="Postal code" aria-label="Postal code" />
      </Stack>
    </Fieldset>
  );
}

Disabled

Setting disabled on the fieldset natively disables every nested form control — no per-field wiring required.

Preview

Open

tsx

import { Checkbox, Fieldset, Input, Stack } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Fieldset legend="Billing (read only)" disabled>
      <Stack gap="3" style={{ width: 360 }}>
        <Input defaultValue="Ada Lovelace" aria-label="Name" />
        <Input defaultValue="ada@example.com" type="email" aria-label="Email" />
        <Checkbox defaultChecked>Send me invoices</Checkbox>
      </Stack>
    </Fieldset>
  );
}

Grouping form controls

Combine with CheckboxGroup or RadioGroup to give a cluster of inputs a visible name plus a focus boundary.

Preview

Open

tsx

import { Checkbox, CheckboxGroup, Fieldset, Stack } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Fieldset legend="Notifications">
      <CheckboxGroup defaultValue={['email']}>
        <Stack gap="2">
          <Checkbox value="email">Email</Checkbox>
          <Checkbox value="sms">SMS</Checkbox>
          <Checkbox value="push">Push</Checkbox>
        </Stack>
      </CheckboxGroup>
    </Fieldset>
  );
}

API

PropTypeDefaultDescription

legend

ReactNode

—

Optional legend. Rendered as the first child inside the fieldset.

className

string

—

Accessibility

Renders a real <fieldset> and <legend> — screen readers automatically announce the legend when focus enters any nested control.
disabled is forwarded to the native fieldset, which disables every descendant form element without extra ARIA work.
A data-disabled attribute mirrors the disabled flag for CSS hooks that need to dim sibling content.
Keep the legend visible — hiding it removes the group’s accessible name.

Recipes

Use one Fieldset per logical section (“Account”, “Address”, “Preferences”) instead of one large form.
Pair with CheckboxGroup / RadioGroup to combine semantic grouping with a controlled value.
Avoid nesting fieldsets more than one level deep — long announcement chains become noisy.