Radio

Radio buttons let users pick exactly one option from a small set. In Nuxt / PLAI use URadioGroup.

Element	Source
Unchecked border and surface	Nuxt UI zinc neutrals
Selected dot and border	CI --ci-color-brand-blue
Focus ring	CI link blue

Live examples

Billing cycle

Monthly Annual (save 15%)

Selected option: CI brand blue · Unselected: Nuxt UI

Access level

View only Edit (unavailable on your plan)

HTML

<fieldset class="ci-fieldset">
  <legend class="ci-legend">Billing cycle</legend>
  <div class="ci-choice-group">
    <label class="ci-radio">
      <input type="radio" name="billing" value="monthly" />
      <span>Monthly</span>
    </label>
  </div>
</fieldset>

All radios in a group must share the same name attribute.

Accessibility

• Wrap related radios in <fieldset> with <legend> — do not rely on colour alone.
• Each option is a <label class="ci-radio"> so the whole row is clickable.
• Checked state uses border and inner dot — not colour alone.

When to use

Control	Use when
Radio	2–5 options, all visible, pick exactly one
Checkbox	Zero or many selections; single on/off consent
Select	Longer lists; space is limited
Switch	Immediate on/off setting with no submit step