Choicebox

Use a choicebox when each radio option needs supporting text or a larger click target.

Standard serviceComplete the work during the next available workshop slot.Priority serviceBring this vehicle forward when the workshop has capacity.

Show codeCopy

Import

import { Choicebox, ChoiceboxGroup } from "@workshop1/ui/components/choicebox"

Composition

Wrap related choiceboxes in ChoiceboxGroup and give every option a title. Use the optional description for a short explanation, constraint, or price.

Accessibility

The card is labelled by its title and description, while the nested radio item preserves native radio semantics and keyboard navigation. Give the group an accessible name when no visible field label exists.

Best practices

• Use choiceboxes for two to five mutually exclusive options.
• Keep the title scannable and the description brief.
• Use checkboxes when users can select more than one option.