Fieldset

A <fieldset> with a 1px solid control-border (in place of the low-contrast 2px groove) and a <legend> set into the top border.

Consumer provides: the grouped controls and a <legend> that states the question or group name.

• Use for every radio group and for related fields such as an address.
• The legend is read before each control’s label, so keep it short: “Delivery speed”, not “Please select your preferred delivery speed below”.
• Do not nest fieldsets more than one level deep.

Composition

Made of

Checkbox (atom), Radio (atom)

Used in

Range slider (molecule), Tri-state checkbox (molecule)

React

import { Fieldset } from '@imsus/normal-ui-react';

<Fieldset legend="Delivery speed">…</Fieldset>