[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)

# Fieldset

Import: `import { Fieldset } from '@neo4j-ndl/react'`

## Props

### Fieldset

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  | The controls grouped by the fieldset |
| `errorText` | `ReactNode` |  |  | Error message displayed below the grouped controls. When provided, it replaces `helpText` |
| `hasRequiredIndicator` | `boolean` |  | `false` | Whether Required or Optional is shown at the end of the legend row |
| `hasVisuallyHiddenLabel` | `boolean` |  | `false` | Whether the legend is clipped out of the layout, leaving it to screen readers only |
| `helpText` | `ReactNode` |  |  | Assistive text displayed below the grouped controls |
| `isDisabled` | `boolean` |  | `false` | Whether all native form controls in the fieldset are disabled |
| `isRequired` | `boolean` |  | `false` | Whether the grouped field is required |
| `label` | `ReactNode` | ✅ |  | The accessible label displayed in the fieldset legend |
| `ref` | `Ref<HTMLFieldSetElement>` |  |  | A ref to apply to the root element. |

Use `RadioGroup` or `CheckboxGroup` when the children are exclusively
radios or checkboxes and should inherit shared group attributes.

## Accessibility

`Fieldset` renders a native `<fieldset>` whose first child is a `<legend>`.
This gives the grouped controls a shared accessible name while each control
keeps its own label.

Help and error text are associated with the fieldset through
`aria-describedby`. An error replaces help text, sets `aria-invalid`, and is
announced by the shared polite live region. `isDisabled` uses the native
`disabled` attribute, which disables descendant form controls. Because a
generic fieldset cannot apply native required behavior to arbitrary children,
`isRequired` adds “Required” to the legend's accessible name; consumers remain
responsible for validating the controls.

Use `hasVisuallyHiddenLabel` only when the same group name is already visible
elsewhere. The legend remains available to assistive technology.

Use `RadioGroup` for one-of-many radio choices and `CheckboxGroup` for related
checkboxes. Use `Fieldset` directly for mixed or other related form controls.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Fieldset
      label="Team settings"
      helpText="These settings apply to the whole team."
    >
      <TextInput label="Team name" placeholder="Graph Platform" />
      <TextInput
        label="Contact email"
        placeholder="team@example.com"
        htmlAttributes={{ type: 'email' }}
      />
      <TextArea
        label="Team description"
        placeholder="Describe what your team works on"
      />
      <Checkbox label="Allow other members to invite people" />
    </Fieldset>
  );
};

export default Component;
```

### Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import {
  Checkbox,
  Fieldset,
  Radio,
  Switch,
  TextArea,
  TextInput,
  TimePicker,
  TimeZonePicker,
} from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Fieldset label="Team settings" isDisabled>
      <TextInput label="Team name" placeholder="Graph Platform" />
      <TextInput
        label="Contact email"
        placeholder="team@example.com"
        htmlAttributes={{ type: 'email' }}
      />
      <TextArea
        label="Team description"
        placeholder="Describe what your team works on"
      />
      <Checkbox label="Allow other members to invite people" />
      <Radio label="Use team defaults" />
      <Switch label="Enable team notifications" />
      <TimePicker label="Daily reminder time" />
      <TimeZonePicker label="Team time zone" value="Europe/Stockholm" />
    </Fieldset>
  );
};

export default Component;
```

### Error

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Fieldset
      label="Team settings"
      errorText="Review the team settings before continuing."
    >
      <TextInput label="Team name" placeholder="Graph Platform" />
      <TextInput
        label="Contact email"
        placeholder="team@example.com"
        htmlAttributes={{ type: 'email' }}
      />
      <TextArea
        label="Team description"
        placeholder="Describe what your team works on"
      />
      <Checkbox label="Allow other members to invite people" />
    </Fieldset>
  );
};

export default Component;
```

### Optional

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Fieldset label="Team settings" hasRequiredIndicator>
      <TextInput label="Team name" placeholder="Graph Platform" />
      <TextInput
        label="Contact email"
        placeholder="team@example.com"
        htmlAttributes={{ type: 'email' }}
      />
      <TextArea
        label="Team description"
        placeholder="Describe what your team works on"
      />
      <Checkbox label="Allow other members to invite people" />
    </Fieldset>
  );
};

export default Component;
```

### Required

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Fieldset label="Team settings" hasRequiredIndicator isRequired>
      <TextInput label="Team name" placeholder="Graph Platform" />
      <TextInput
        label="Contact email"
        placeholder="team@example.com"
        htmlAttributes={{ type: 'email' }}
      />
      <TextArea
        label="Team description"
        placeholder="Describe what your team works on"
      />
      <Checkbox label="Allow other members to invite people" />
    </Fieldset>
  );
};

export default Component;
```

### Visually Hidden Label

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <>
      <Fieldset label="Team settings" hasVisuallyHiddenLabel>
        <TextInput label="Team name" placeholder="Graph Platform" />
        <TextInput
          label="Contact email"
          placeholder="team@example.com"
          htmlAttributes={{ type: 'email' }}
        />
        <TextArea
          label="Team description"
          placeholder="Describe what your team works on"
        />
        <Checkbox label="Allow other members to invite people" />
      </Fieldset>
    </>
  );
};

export default Component;
```