Radio Group

Provides shared state to a series of radio buttons. color on the group tints each radio: wash fill, accent dot when checked, no ring.

Best apple

Anatomy

<UiRadioGroup default-value="fuji-apple">
  <label>
    <UiRadioRoot value="fuji-apple">
      <UiRadioIndicator />
    </UiRadioRoot>
    Fuji
  </label>
</UiRadioGroup>

Parts

  • RadioGroup — role="radiogroup". value / defaultValue, name, disabled, readOnly. Arrow keys move the selection.
  • Radio Root — role="radio". value is required. data-checked / data-unchecked. Only the selected radio is in the tab order.
  • Radio Indicator — the inner dot. Opacity and scale use data-starting-style / data-ending-style.