The Fieldset component is a container component that can contain a number of form input elements, eg. Radio Buttons or Checkboxes and give them a group label, and optionally a description and feedback. It's based on the HTML Fieldset element.
AnatomyPermalink to: Anatomy
- Label: Text that accurately describes the purpose of the items in the Fieldset.
- Required (optional): Used to indicate whether the Fieldset needs to be filled out.
- Description (optional): Used to add further context for the purpose of the Fieldset.
- Container: Container for the items in the Fieldset, eg. Radio Buttons or Checkboxes.
- Feedback (optional): Used for feedback messages.
UsagePermalink to: Usage
Use it when you need to group fields together that have a shared label. This could be groups of Radio Buttons or Checkboxes, but also groups of Input Fields and other form elements, eg. for birthdays, addresses, etc.
When to usePermalink to: When to use
- To indicate that a group of form elements are related and have a shared group label.
When not to usePermalink to: When not to use
- To create visual sections in forms.
ExamplesPermalink to: Examples
Legend sizePermalink to: Legend size
In order to make the Fieldset fit into the visual heading hierarchy of the page, you can adjust the size of the legend with legendSize (defaults to medium).
Open
import { RadioButton, Fieldset } from "@peakon/bedrock/react/form";
import { Stack } from "@peakon/bedrock/react/layout";
<Fieldset legend="Small legend" legendSize="small" description="Lorem ipsum">
<Stack spacing={8}>
<RadioButton
name="color_mode_small_legend"
value="default"
label="Default"
defaultChecked
/>
<RadioButton
name="color_mode_small_legend"
value="deuteranopia"
label="Deuteranopia"
/>
</Stack>
</Fieldset>
<Fieldset
legend="Medium legend (default)"
legendSize="medium"
description="Lorem ipsum"
>
<Stack spacing={8}>
<RadioButton
name="color_mode_medium_legend"
value="default"
label="Default"
defaultChecked
/>
<RadioButton
name="color_mode_medium_legend"
value="deuteranopia"
label="Deuteranopia"
/>
</Stack>
</Fieldset>
<Fieldset legend="Large legend" legendSize="large" description="Lorem ipsum">
<Stack spacing={8}>
<RadioButton
name="color_mode_large_legend"
value="default"
label="Default"
defaultChecked
/>
<RadioButton
name="color_mode_large_legend"
value="deuteranopia"
label="Deuteranopia"
/>
</Stack>
</Fieldset>Feedback messagesPermalink to: Feedback messages
Fieldset accepts status and feedbackMessage to provide feedback.
Open
import { RadioButton, Fieldset } from "@peakon/bedrock/react/form";
import { Stack } from "@peakon/bedrock/react/layout";
<Fieldset
legend="Color mode"
description="Lorem ipsum"
feedbackMessage="Neutral feedback"
>
<Stack spacing={8}>
<RadioButton
name="color_mode_neutral_feedback"
value="default"
label="Default"
defaultChecked
/>
<RadioButton
name="color_mode_neutral_feedback"
value="deuteranopia"
label="Deuteranopia"
/>
</Stack>
</Fieldset>
<Fieldset
legend="Color mode"
description="Lorem ipsum"
status="error"
feedbackMessage="Error feedback"
>
<Stack spacing={8}>
<RadioButton
name="color_mode_error_feedback"
value="default"
label="Default"
defaultChecked
/>
<RadioButton
name="color_mode_error_feedback"
value="deuteranopia"
label="Deuteranopia"
/>
</Stack>
</Fieldset>
<Fieldset
legend="Color mode"
description="Lorem ipsum"
status="success"
feedbackMessage="Success feedback"
>
<Stack spacing={8}>
<RadioButton
name="color_mode_success_feedback"
value="default"
label="Default"
defaultChecked
/>
<RadioButton
name="color_mode_success_feedback"
value="deuteranopia"
label="Deuteranopia"
/>
</Stack>
</Fieldset>With CheckboxesPermalink to: With Checkboxes
Adding a set of Checkboxes inside a Fieldset will group the fields and give them all a shared group label.
Open
import { Checkbox, Fieldset } from "@peakon/bedrock/react/form";
import { Stack } from "@peakon/bedrock/react/layout";
<Fieldset legend="Shopping list" description="Lorem ipsum">
<Stack spacing={8}>
<Checkbox value="toiler_paper" label="Toilet paper" />
<Checkbox value="eggs" label="Eggs" defaultChecked />
<Checkbox value="milk" label="Milk" />
</Stack>
</Fieldset>With Radio ButtonsPermalink to: With Radio Buttons
Adding a set of Radio Buttons inside a Fieldset will group the fields and give them all a shared group label.
Open
import { RadioButton, Fieldset } from "@peakon/bedrock/react/form";
import { Stack } from "@peakon/bedrock/react/layout";
<Fieldset legend="Color mode" description="Lorem ipsum">
<Stack spacing={8}>
<RadioButton
name="color_mode"
value="default"
label="Default"
defaultChecked
/>
<RadioButton name="color_mode" value="deuteranopia" label="Deuteranopia" />
</Stack>
</Fieldset>Props TablePermalink to: Props Table
Props extend from HTML Fieldset Element(external link), with the omission of className, style, aria-labelledby and aria-label
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
legend | string | Title for the fieldset | — | Yes |
legendSize | small | medium | large | Size of the legend | medium | No |
description | string | Description for the fieldset | — | No |
status | error | success | Used to indicate the status of the fieldset | — | No |
feedbackMessage | string | Feedback message for the fieldset | — | No |