ki-radio-group

A token-styled radio group that owns selection, keyboard coordination and form participation for slotted ki-radio options — for choosing exactly one of a small set that should all be visible at once.

Monthly Yearly Lifetime

<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 value="lifetime" disabled>Lifetime</ki-radio>
</ki-radio-group>

Examples

In a form

The group contributes name/value to FormData, honors required, and re-dispatches the composed change event at the host:

1-10 11-50 51+ Continue

<form onsubmit="event.preventDefault()">
<ki-radio-group label="Team size" name="size" required>
  <ki-radio value="s">1-10</ki-radio>
  <ki-radio value="m">11-50</ki-radio>
  <ki-radio value="l">51+</ki-radio>
</ki-radio-group>
<ki-button variant="primary">Continue</ki-button>
</form>

API reference

When to use: a person must choose exactly one of a small set of mutually exclusive options that should all be visible at once.

When not to use: many options or tight space (use ki-select), independent on/off settings (use ki-checkbox or ki-switch), multiple selection, or authored selection on options; set this group's value instead.

Properties & attributes

Attribute	Property	Type	Default	Description
disabled	disabled	boolean	false	Makes the whole group unavailable, skips it in Tab order and removes its form entry. When NOT to use: do not use disabled for pending/loading semantics.
label	label	string	–	Visible label and accessible-name source for the radiogroup. When NOT to use: do not omit it; unlabeled groups fail accessibility gates.
name	name	string | undefined	–	Form-data key for the selected option's value. Omit when the group should not contribute a form entry. When NOT to use: do not put name on ki-radio options; their internal native inputs are intentionally unnamed.
required	required	boolean	false	Requires one selected option for form submission. The group uses platform valueMissing from its internal native radio inputs. When NOT to use: do not use required when no answer is acceptable.
value	value	string	''	Projection of the current selection. The initial attribute selects the first matching option; unmatched values leave the group unselected and operable. Assigning the property updates selection silently. When NOT to use: never author selection on ki-radio; set this value.

Slots

Slot	Description
(default)	ki-radio options. Document order is navigation order.

CSS parts

Part	Description
label	Visible group label and accessible-name source.

CSS custom properties

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

Token	Description
--ki-radio-group-gap	dimension used by the radio group component for gap.
--ki-radio-group-label-font-size	dimension used by the radio group component for label font size.
--ki-radio-group-label-font-weight	font weight used by the radio group component for label font weight.
--ki-radio-group-label-line-height	dimension used by the radio group component for label line height (closest measured analogue: Radio_label sm 13/20; no group-title master exists — low-confidence refinement).
--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 label prop is mandatory — unlabeled groups fail accessibility gates. Selection follows the APG radio-group pattern: arrow keys move it, the group is one tab stop. For many options or tight space use ki-select; for independent on/off settings use ki-checkbox or ki-switch.

Workshop

Open ki-radio-group in Storybook