Library · Forms & CTAs

Fieldset

Fieldset wrapper for grouping form controls (e.g. checkboxes/radios) with group-level validation support; supports a 'minimal' borderless variant.

Figma: Primitives / Fieldset ↗

Live preview — edit theme bottom-right

---
import Fieldset from "../components/primitives/forms/Fieldset.astro";
import Checkbox from "../components/primitives/forms/Checkbox.astro";
---
<Fieldset name="notify" legend="Notify me about" required data-validation="Pick at least one">
  <Checkbox name="notify" label="Product updates" value="updates" />
  <Checkbox name="notify" label="Special offers" value="offers" />
</Fieldset>

Props

Name	Type	Required	Description
`name`	`string`	Yes	Name attribute for the fieldset (used for group validation)
`id`	`string`	—	Unique identifier for the fieldset
`legend`	`string`	Yes	Legend text for the fieldset
`required`	`boolean`	—	Whether the fieldset group is required (at least one selection)
`data-validation`	`string`	—	Error message to display when group validation fails
`class`	`string`	—	Additional classes to apply to the fieldset
`variant`	`'default' \| 'minimal'`	—	Variant of the fieldset
`[key: string]`	`any`	—	HTML attributes

Example with all props

<Fieldset
  class="interests-fieldset"
  name="interests"
  id="interests"
  legend="Areas of interest"
  variant="minimal"
  required
  data-validation="Choose at least one option"
>
  <Checkbox name="interests" label="House & land" value="house-land" />
  <Checkbox name="interests" label="Apartments" value="apartments" />
</Fieldset>