Fieldset

Presentational only — compatible with any form library. Fieldset renders a native <fieldset> and <legend> and places no constraints on the children. It works seamlessly with React Hook Form, Formik, or uncontrolled inputs.

Grouping related text inputs

Use Fieldset to semantically group a set of related inputs under a shared label — for example, the fields that make up a postal address.

Postal address

Address line 1

Address line 2Flat, suite, building, floor, etc.

City

Postcode

import { Fieldset, TextInputField } from '@eekodigital/raster';

<Fieldset legend="Postal address">
<TextInputField label="Address line 1" name="address1" />
<TextInputField
  label="Address line 2"
  name="address2"
  hint="Flat, suite, building, floor, etc."
/>
<TextInputField label="City" name="city" />
<TextInputField label="Postcode" name="postcode" />
</Fieldset>

Checkboxes and radios: Checkbox includes its own built-in fieldset when grouping multiple options. Use RadioGroup for radio buttons — it already renders a fieldset with its own legend. Use Fieldset when you need to group text inputs or other heterogeneous controls.

With hint text

Use the hint prop to add supplementary guidance below the legend.

Emergency contactWe'll only use this if we can't reach you directly.

Full name

Phone number

<Fieldset legend="Emergency contact" hint="We'll only use this if we can't reach you directly.">
<TextInputField label="Full name" name="emergency_name" />
<TextInputField label="Phone number" name="emergency_phone" type="tel" />
</Fieldset>

Props

Prop	Type	Default	Description
legend	ReactNode	—	The visible label for the group, rendered as a <legend>.
hint	string	—	Optional hint text displayed below the legend.
children	ReactNode	—	The form controls to group.