ChoiceGroup

The question a set of radios or checkboxes answers. Its options are InlineChoice, OptionCard or PathCard, laid out however the page needs.

import { ChoiceGroup } from '@zitdevs/ui';

Examples

How should we meet?

Video callPhone

We confirm the time by email.

How should we meet?

Video callPhone

Choose how you would like to meet.

<ChoiceGroup id="meeting" legend="How should we meet?" error={errors.meeting}>
  <div className="grid gap-3 sm:grid-cols-2">
    <InlineChoice type="radio" id="meeting-video" name="meeting" value="video" label="Video call" />
    <InlineChoice type="radio" id="meeting-phone" name="meeting" value="phone" label="Phone" />
  </div>
</ChoiceGroup>

With no options of its own, it is still the group’s frame:

Topics

Choose any.

Props

Prop	Type	Default	Notes
id	string	required	On the fieldset: an error summary links to it (zd-f-<key>).
legend	string	required	The question: the group’s name.
hideLegend	boolean	false	Off screen, still the name.
hint	string	—	Describes the group.
error	string	—	Replaces the hint.
children	ReactNode	—	The options, in whatever layout the page needs.
ref	Ref<HTMLFieldSetElement>	—
className	string	—	Placement. Merged last.
anything else	<fieldset> attributes	—

Exported types: ChoiceGroupProps.

Accessibility

• A <fieldset> whose first child is its <legend>: entering any option announces the question first.
• The hint or error describes the group (aria-describedby on the fieldset, line id `${id}-message`), never each option, and marks none of them invalid.

Without JavaScript

It needs none: a fieldset of native controls. It renders as a Server Component.

Theming

ink for the legend; the message takes FieldMessage’s roles.