Radio Button

Usage Guidelines:

• Do Use when the user must make a single choice from a list (e.g., "Select Permission: [ ] View [x] Edit").

• Do Use when you want to expose all available options upfront for comparison.

• Do Not Use for binary "On/Off" settings (use a Toggle).

• Do Not Use if the list of options is very long (>5 items); use a Dropdown/Select to save space.

Anatomy & Properties:

A. The Control (Radio)

• Visual: A circular container with Radius-FULL (Perfect Circle). This shape is universally recognized as "Single Select".

• Size: Supports Default (20px) and S (16px) to match dense forms.

B. The Label

• Position: Text label is always aligned to the right.

• Interaction: Clicking the label must trigger selection to ensure a large, accessible hit target.

States (Interaction)

The component supports two primary logical states:

• Unselected (Default): An empty stroke circle (Stroke-Neutral-Primary).

• Selected (Active):

  • Visual: A solid Brand-Primary (Blue) outer stroke containing a solid inner circle (dot).

  • Logic: Only one item in a Radio Group can be in this state at a time.

Interaction States

• Hover: A subtle halo or darker border color appears to indicate interactivity.

• Focus: A focus ring appears around the circle for keyboard navigation.

• Disabled: Opacity is reduced to 50%, and the input is non-interactive. Often used when a specific option is unavailable based on previous choices.