usage
- Use when supporting text materially helps a person choose
- Keep options in a fieldset with a visible legend
- Use ordinary radio or checkbox controls for concise choices
- Keep option availability and domain decisions in the consuming application
Forms
Choice card
Present a native radio or checkbox choice with decision-supporting context.
Production component
Live preview
This example is rendered from the same package consumed by UJ applications.
Contract
Usage and quality requirements
The contract keeps purpose, states and ownership visible before a component is reused.
states
- radio
- checkbox
- selected
- unselected
- disabled
- long content
- keyboard focus
- narrow viewport
- dark theme
- forced colours
purpose
Make a consequential radio or checkbox option understandable before selection by pairing the native control with a label, explanation and optional source context.
responsive
- Single-column content at 320px
- Fluid text wrapping
- 768px
- 1440px
- 200% text resize
accessibility
- Native radio or checkbox semantics
- Label wraps the complete target
- Description and metadata are explicitly associated
- Selection is not conveyed by colour alone
- Visible keyboard focus
- Minimum 44px target
- WCAG 2.2 AA
runtime Boundary
The component performs no fetching, persistence, validation, authorization or option inference.
source Authority
The consuming application's governed workflow and Corporate Identity presentation contract