CSS Radio Button with Custom Dot and Sizes

wu-radio styles a native radio button and its label. The circle is 1em, so it follows the root type size. Group the radios in a <fieldset> with a <legend>.

Class or state	Effect
`wu-radio`	Root, on `<label>`. Circle and label in a row
`wu-radio-input`	Part, on `<input type="radio">`. The circle; also works alone with `aria-label`
`wu-radio-label`	Part. The label text
`sm`, `lg`	Small and large type size, so a smaller or larger circle
`checked`	Brand fill with a dot
`aria-invalid="true"` or `:user-invalid`	2px danger edge, kept on hover and when checked
`disabled`	Lower opacity on the whole label, not-allowed cursor

Default

Billing period Monthly Yearly

<fieldset class="wu-field-group">
  <legend class="wu-field-group-legend">Billing period</legend>
  <label class="wu-radio">
    <input class="wu-radio-input" type="radio" name="radio-period" checked>
    <span class="wu-radio-label">Monthly</span>
  </label>
  <label class="wu-radio">
    <input class="wu-radio-input" type="radio" name="radio-period">
    <span class="wu-radio-label">Yearly</span>
  </label>
</fieldset>

Sizes

Small Default Large

<div class="flex col gap-2">
  <label class="wu-radio sm">
    <input class="wu-radio-input" type="radio" name="radio-size" checked>
    <span class="wu-radio-label">Small</span>
  </label>
  <label class="wu-radio">
    <input class="wu-radio-input" type="radio" name="radio-size">
    <span class="wu-radio-label">Default</span>
  </label>
  <label class="wu-radio lg">
    <input class="wu-radio-input" type="radio" name="radio-size">
    <span class="wu-radio-label">Large</span>
  </label>
</div>

States

Invalid Disabled Disabled and checked

<div class="flex col gap-2">
  <label class="wu-radio">
    <input class="wu-radio-input" type="radio" name="radio-state" aria-invalid="true">
    <span class="wu-radio-label">Invalid</span>
  </label>
  <label class="wu-radio">
    <input class="wu-radio-input" type="radio" name="radio-state" disabled>
    <span class="wu-radio-label">Disabled</span>
  </label>
  <label class="wu-radio">
    <input class="wu-radio-input" type="radio" name="radio-disabled" checked disabled>
    <span class="wu-radio-label">Disabled and checked</span>
  </label>
</div>

Circle alone

<input class="wu-radio-input" type="radio" name="radio-alone" aria-label="Choose this plan">

Accessibility

The control is a native radio button: arrow keys move the choice inside a group with the same name.
A <fieldset> and <legend> give the group its name.
Keyboard focus shows the focus ring from the border-focus tokens. In forced colors mode the circle uses system colors.

Right to left

The circle sits on the inline start, so it moves to the right.

شهري

<label class="wu-radio">
  <input class="wu-radio-input" type="radio" name="radio-rtl" checked>
  <span class="wu-radio-label">شهري</span>
</label>

Load only the radio

@use "@wovenui/components/radio";

The radio needs no other component. The first example also uses the field group.

Radio button