Fieldset

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.

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.

<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