Radio
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
- Radio: The main input element (
input.par-radio) - Radio icon: Visual indicator (
.radio-icon) - Label: Main label (
.input-label) - Sublabel: Optional sublabel (
.input-sublabel) - Wrapper: Container (
.radio-wrapper) - Group: For grouped radios (
.radio-group)
States
- Default: Unchecked, enabled
- Checked: Selected state
- Hovered: Mouse over
- Focused: Keyboard or mouse focus
- Disabled: Not interactive
- Error: Invalid/error state
Options
- color: 'neutral' | 'accent'
- label: string | ReactNode
- sublabel: string | ReactNode
- disabled: boolean
- radioWrapperProps: any
- All InputProps: Inherits all props from Input
Behaviors
- Keyboard: Fully accessible via Tab, Space/Enter to toggle
- Group: Only one radio in a group can be selected
- Focus ring: Visible on keyboard focus
- Animation: SVG icon animates on check/uncheck
- ARIA: Uses appropriate ARIA attributes for accessibility
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| 2025-06-03 | new | Initial design | Oanh Nguyen | PAR-52 |