Radio

Overview:

The Radio Button component allows users to select one option from a group of mutually exclusive choices. It provides clear visual feedback for selection, interaction, and error states, and is designed for structured form inputs and data collection workflows.

---

Usage Guidelines:

Use radio buttons when users must choose exactly one option from a predefined set.

When to use

• Selection between 2–7 mutually exclusive options

• Form inputs where one value must be chosen

• Settings or configurations requiring a single choice

When not to use

• Independent or multi-select choices (use Checkbox)

• Binary yes/no choices (use Checkbox instead)

• Long or unbounded option lists (use Select)

Best practices

• Always present radio buttons in clearly labeled groups

• Ensure only one radio button in a group can be selected

• Use vertical alignment for readability when possible

• Use alert style only to indicate validation errors

---

Component Properties:

status (enum)

Options: default, hover, focus, active Purpose: Controls interaction state and visual feedback. Usage: Automatically managed through user interaction. Context: Ensures clarity for pointer and keyboard users.

---

size (enum)

Options: sm, base, lg Purpose: Determines the scale of the radio button. Usage:

• sm → compact or dense layouts

• base → standard form usage

• lg → high-visibility or touch-friendly contexts Context: Scales the radio circle, inner dot, and focus ring consistently.

---

is-selected (boolean)

Purpose: Indicates whether the radio button is selected. Usage:

• Only one radio button in a group may be true Context: Must be synchronized with group state and form data.

---

style (enum)

Options: grey, cta, alert Purpose: Controls visual treatment and semantic meaning. Usage:

• grey → default, neutral selections

• cta → emphasized or primary choice

• alert → error state only Context: For radio buttons, alert is reserved exclusively for validation errors and must not be used for emphasis or branding.

---

is-disabled (boolean)

Purpose: Controls whether the radio button is interactive. Usage:

• true → non-interactive, muted appearance

• false → fully interactive Context: Maintains layout while preventing selection.

---

Appearance Modes:

Supports the following variable collections:

theme

• Adapts colors, borders, and fills for light and dark themes

• Maintains WCAG-compliant contrast in all states

• Error (alert) styling remains clearly distinguishable in both themes

---

size

• Controls physical dimensions of the radio circle and inner dot

• Ensures consistent alignment with surrounding typography

• Supports sm, base, and lg

---

status

• default: Resting state

• hover: Pointer feedback

• focus: Keyboard focus ring

• active: Pressed interaction state

---

is-disabled

• false: Standard interactive appearance

• true: Reduced opacity and muted tokens

ℹ️ alert style may be combined with theme, size, and status, but is semantically reserved for error states only.

---

Nested Components:

No nested components

---

♿ Accessibility Considerations:

• Contrast: Meets WCAG AA across all themes, sizes, and states

• Keyboard navigation:

  • Tab to enter the radio group

  • Arrow keys to move between options

  • Space to select

• Screen reader support:

  • Proper role="radiogroup" and role="radio" usage

  • Announces selected state and option labels

  • Group context communicated via labels or legends

• Semantic tags:

  • Implemented using <input type="radio">

  • Grouped with shared name attribute

  • Wrapped in <fieldset> and <legend> when appropriate

---

🧠 Developer Notes:

• Maps directly to native HTML radio inputs

• Mutual exclusivity enforced via shared name

• style="alert" should be applied only by validation logic

• Error states should include:

  • aria-invalid="true"

  • Associated error message via aria-describedby

• Theme and size are presentational and do not affect semantics

---

Known Issues:

No known issues.

---

Reference Links:

• WCAG 2.1 – Radio Button Accessibility

• ARIA Authoring Practices – Radio Group Pattern

• Dev Launchers Design Tokens (Color, Spacing, Radius)