# Fieldset

A native group with a legend, shared descriptions and disabled form behavior.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Fieldset, Checkbox } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Fieldset legend="Notifications" hint="Choose the updates you want.">
        <Checkbox label="Product updates" name="updates" defaultChecked />
        <Checkbox label="Release notes" name="releases" />
      </Fieldset>
    </FloodRoot>
  );
}
```

## Design notes

- Uses a real fieldset and legend, with a ref to HTMLFieldSetElement. Disabled descendants retain native form semantics.
- The browser exempts controls in the first legend from inherited disabling. Avoid interactive legend contents unless this is intentional.
- hint, message, error and external aria-describedby IDs are merged without duplicates. Error takes precedence over an advisory status.
- Group status describes the group; it does not mark every child invalid, manage selected values or implement a RadioGroup/CheckboxGroup.
- legendSize="section" gives an independent form section a 1rem semibold title and a 1rem body inset. The default "label" remains a compact choice caption; neither option changes native group semantics.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `legend` | `ReactNode` | `Required` |
| `legendSize · 0.2.10` | `"label" \| "section"` | `"label"` |
| `hideLabel · 0.2.3` | `boolean` | `false` |
| `hint` | `ReactNode` | `—` |
| `error` | `ReactNode` | `—` |
| `message` | `ReactNode` | `—` |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `Native HTML props` | `FieldsetHTMLAttributes<HTMLFieldSetElement>` | `Forwarded` |