Skip to content
v2.5.0
English
Русский
Documentation

Radio

Radio is the single-choice selection control for mutually exclusive options that share the same name.
StorybookSourceFigma

Overview

Radio styling is driven by a small input-level variable surface for size, border color, and focus outline. It stays closer to a native input than the more composable checkbox or switch controls.

Public CSS Variables

VariableValueAffects
Visual control size.Radio
No visible change in this state
Current border color.Radio
No visible change in this state
Focus outline color.Radio
No visible change in this state
State transition timing.Radio
No visible change in this state
Border color on hover.Radio
No visible change in this state
Border color while pressed.Radio
No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

  • Radio: owns the entire visual surface as one styled native input.

State And Variant Interaction

  • size maps to different spacing tokens.
  • variant changes the checked-state color family.
  • Disabled state changes background and checked treatment together.

Examples

.brandRadio {
  --focus-color: var(--fills-primary);
}
.compactRadio {
  --radio-size: 14px;
}

Do Not Override

  • Do not remove the focus outline without a replacement.
  • Do not weaken the checked-state border width until selection becomes hard to distinguish.
  • Do not use raw palette overrides where semantic tokens already exist.