# Fieldset

A wrapper for related form fields. Used to separate form content with a label and spacing.

Tabs: [Guidelines](/components/web/fieldset/fieldset.guidelines.md) · [Code](/components/web/fieldset/fieldset.code.md)

## Basic usage

`Fieldset` groups related form content under a label. The label is followed by a divider line, and the content is padded below it. It is commonly used to separate groups of filters in filter drawers and sections of long forms.

```tsx
import {Checkbox, Fieldset, Stack} from '@pleo-io/telescope'

const StatusFilter = () => (
    <Fieldset legend="Status">
        <Stack space={12}>
            <Checkbox name="approved">Approved</Checkbox>
            <Checkbox name="pending">Pending</Checkbox>
        </Stack>
    </Fieldset>
)
```

`Fieldset` renders a native `<fieldset>` element. Consecutive fieldsets are spaced apart automatically; the first one has no top margin.

## Spacing children

Pass `spaceChildren` to spread the children across the row (`justify-content: space-between`), for example a label on the left and a control on the right.

```tsx
<Fieldset legend="Notifications" spaceChildren>
    <Text>Email me when an expense is approved</Text>
    <Switch aria-label="Email me when an expense is approved" />
</Fieldset>
```

## API reference

Groups related form content under a label with a divider line and spacing.

#### `children` (required)

Type: `ReactNode`

##### Allowed values

- `null`
- `string`
- `number`
- `bigint`
- `false`
- `true`
- `ReactElement<unknown, string | JSXElementConstructor<any>>`
- `Iterable<ReactNode>`
- `ReactPortal`
- `Promise<AwaitedReactNode>`

Default: -

The grouped content

#### `legend` (required)

Type: `string`

Default: -

Label shown at the top of the group, followed by a divider line

#### `spaceChildren`

Type: `boolean`

Default: `false`

Spread the children across the row (`justify-content: space-between`)