ki-radio

One option in a token-styled ki-radio-group. Place it inside a group when a person must choose exactly one of a small visible set — never standalone.

Monthly Yearly

<ki-radio-group label="Billing period" name="billing" value="monthly">
<ki-radio value="monthly">Monthly</ki-radio>
<ki-radio value="yearly">Yearly</ki-radio>
</ki-radio-group>

API reference

When to use: place inside ki-radio-group when a person must choose exactly one of a small visible set.

When not to use: ki-radio standalone, multiple selection, or authored selection state; set the parent group's value instead.

Properties & attributes

Attribute	Property	Type	Default	Description
disabled	disabled	boolean	false	Prevents this option from being selected or focused. Disabled options are skipped by group arrow navigation and omitted from form submission when selected before becoming disabled. When NOT to use: do not use disabled as a temporary loading state.
value	value	string	'on'	Submission value projected by the parent ki-radio-group when this option is selected. Omit for native radio parity with value "on". When NOT to use: do not use value to author selection; set the group's value property or attribute.

Slots

Slot	Description
(default)	Option label. This is the accessible name and activation surface.

CSS parts

Part	Description
control	Visual ring and selected dot.
label	Wrapper around the option label.

CSS custom properties

The public styling contract of ki-radio: reassign these tokens at :root or on a subtree — never override internals.

Token	Description
--ki-effect-component-primary-default-shadow	MarsUI Component_effect/primary_default: drop 0/1/1/-0.5 plus inner White/12 0/3/3. Pair with backdrop-filter blur(var(--ki-effect-component-backdrop-blur)) — CSS cannot mix backdrop blur into box-shadow.
--ki-motion-duration-fast	Fast interaction transition duration.
--ki-motion-easing-spring	Gentle overshoot curve for glass pops and playful state transfers. onmars: ki.easing.spring; no MarsUI Figma motion variable exists (documented completion of the motion language).
--ki-motion-easing-standard	Standard interaction transition easing curve.
--ki-radio-border-width	dimension used by the radio component for border width.
--ki-radio-control-radius	dimension used by the radio component for control radius.
--ki-radio-control-size	dimension used by the radio component for control size.
--ki-radio-dot-shadow	shadow used by the radio component for the selected dot (MarsUI Small_dark_shadow: drop 0/2/3/-1.5 Elevation/shadow_dark, the lifted-dot look of the master).
--ki-radio-dot-size	dimension used by the radio component for dot size.
--ki-radio-focus-ring-color	color used by the radio component for focus ring color.
--ki-radio-focus-ring-offset	dimension used by the radio component for focus ring offset.
--ki-radio-focus-ring-shadow	shadow used by the radio component for the focus ring glow (MarsUI Focus/primary: 3px spread ring at 20% — see ki.focus.primary. specs/002-ki-button/design-extraction.md §2.5 recorded 40%, having read the alpha off the Dark canvas mode, same double mechanism as ki-button: glow plus the opaque indicator).
--ki-radio-focus-ring-width	dimension used by the radio component for focus ring width.
--ki-radio-gap	dimension used by the radio component for gap (MarsUI md label pairing: Space/xl 12px for the 20px circle / 24px target geometry).
--ki-radio-label-font-size	dimension used by the radio component for label font size (MarsUI md pairing: body_2 15px; line-height stays 24 and weight 500).
--ki-radio-label-font-weight	font weight used by the radio component for label font weight.
--ki-radio-label-line-height	dimension used by the radio component for label line height.
--ki-radio-min-target	dimension used by the radio component for min target.
--ki-radio-selected-active-bg	color used by the radio component for selected active background (MarsUI defines no pressed state; mirrors rest).
--ki-radio-selected-active-border	color used by the radio component for selected active border (same as the fill: borderless look).
--ki-radio-selected-active-fg	color used by the radio component for selected active foreground.
--ki-radio-selected-active-overlay	color used by the radio component for the selected pressed wash (ki-button active/overlay precedent). MarsUI defines no pressed fill and the brand ramp has no darker rung that survives the dark scheme, so the press composites the pressed state layer over the rest fill — a keyboard hold shows a real paint delta even under reduced motion, where the transform compress is gated off (bare-page state-delta contract).
--ki-radio-selected-disabled-bg	color used by the radio component for selected disabled background (MarsUI Surface/disabled_med_em Gray/300).
--ki-radio-selected-disabled-border	color used by the radio component for selected disabled border (same as the fill: borderless look).
--ki-radio-selected-disabled-fg	color used by the radio component for selected disabled dot (MarsUI Surface/disabled_base_em Gray/100 — a light dot one quiet value step above the gray donut, not a dark dot).
--ki-radio-selected-hover-bg	color used by the radio component for selected hover background (the master has no selected-hover variant; mirrors ki-checkbox checked hover: a real delta in both schemes).
--ki-radio-selected-hover-border	color used by the radio component for selected hover border (same as the fill: borderless look).
--ki-radio-selected-hover-fg	color used by the radio component for selected hover foreground.
--ki-radio-selected-rest-bg	color used by the radio component for selected rest background (MarsUI active radio is a solid Surface/primary_med_em #845abe circle — the filled donut with a white dot is the signature, mirroring ki-checkbox checked).
--ki-radio-selected-rest-border	color used by the radio component for selected rest border (same as the fill: the selected circle is borderless in the master).
--ki-radio-selected-rest-fg	color used by the radio component for selected rest dot (MarsUI Text/primary_on_primary white 8px dot).
--ki-radio-unselected-active-bg	color used by the radio component for unselected active background. Brief §1: neutral surface em ramp one step above hover (s1→s2), matching ki-checkbox unchecked active; the primary-tinted alpha stays in radio.material3.
--ki-radio-unselected-active-border	color used by the radio component for unselected active border.
--ki-radio-unselected-active-fg	color used by the radio component for unselected active foreground.
--ki-radio-unselected-disabled-bg	color used by the radio component for unselected disabled background (MarsUI Surface/disabled_med_em Gray/300).
--ki-radio-unselected-disabled-border	color used by the radio component for unselected disabled border (same as the fill: borderless look in the master).
--ki-radio-unselected-disabled-fg	color used by the radio component for unselected disabled dot color (dot is hidden unselected; kept coherent with the disabled ladder, retiring the deprecated ki.text.muted alias).
--ki-radio-unselected-hover-bg	color used by the radio component for unselected hover background. Brief §1: onmars hover is neutral (hover_overlay / surface em ramp), matching ki-checkbox unchecked hover (s1); the former primary-tinted alpha is the M3 state-layer pattern and stays in radio.material3.
--ki-radio-unselected-hover-border	color used by the radio component for unselected hover border.
--ki-radio-unselected-hover-fg	color used by the radio component for unselected hover foreground.
--ki-radio-unselected-rest-bg	color used by the radio component for unselected rest background.
--ki-radio-unselected-rest-border	color used by the radio component for unselected rest border.
--ki-radio-unselected-rest-fg	color used by the radio component for unselected rest foreground.
--ki-surface-special-dark-s0-light-s2	semantic color for surface special dark s0 light s2.
--ki-surface-special-light-s0-dark-s4	semantic color for surface special light s0 dark s4.
--ki-text-high-em	semantic color for text high em.
--ki-text-med-em	semantic color for text med em.
--ki-typography-family-body	semantic font family for typography family body.

Accessibility

The default slot is the accessible-name source of the option. Selection is never authored on the radio — set the parent group’s value instead; the group owns keyboard coordination (arrow keys move selection) and form participation.

Workshop

Documented with its parent: open ki-radio-group in Storybook