Primitive
ChoiceGroup
Pick one of a few: cards for choices with consequences, chips for quick ones.
States
List
List with a warning option
Row (chips)
With icons
Disabled
When to use
- Escalation channel, timeout behaviour, receipt policy: any setting with two to five named options.
When not to
- For autonomy. Use AutonomyLadder.
- For a true on/off. Use Toggle.
- For more than about six options. Use a select.
Props
| Name | Type | Notes |
|---|---|---|
| label / value / onChange / options* | Options carry label, description, optional icon and tone. | |
| layout | "list" | "row" | List is a stack of cards; row is a wrapping line of chips. |
| hint / disabled |
* required
Accessibility invariants
- A fieldset with a legend; native radio inputs underneath, so arrow keys and screen readers behave.
- The focus ring is drawn on the visible card or chip via the hidden input's focus-visible state.
- A warning-toned option shows a glyph when unselected and the refused colour when selected. Never colour alone.
Agent instructions
For anything generating UI from this system
Use ChoiceGroup for the escalation and receipts sections of a contract editor. Give every option a one-sentence description in list layout. Mark options that go ahead without the user as tone="warning". Do not use it for autonomy or hard rules.