Base

Class	Description
.ui-radio	Base class

Size

Class	Value
.ui-radio--lg	lg

State

Class	Value
.ui-radio--error	error
.ui-radio--success	success

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-radio-size	calc(var(--ui-unit) * 2)	Overall size
--ui-radio-bg	var(--ui-color-bg)	Background color
--ui-radio-bg-checked	var(--ui-color-primary)	Bg checked
--ui-radio-border-color	var(--ui-color-border-strong)	Border color
--ui-radio-border-color-focus	var(--ui-color-primary)	Border color focus
--ui-radio-dot-color	var(--ui-color-text-inverse)	Dot color
--ui-radio-size-lg	calc(var(--ui-unit) * 3)	Overall size at large size
--ui-radio-error-border	var(--ui-color-danger)	Error border
--ui-radio-success-border	var(--ui-color-success)	Success border

<input class="ui-radio" type="radio" name="sizes" checked></input>
<input class="ui-radio ui-radio--lg" type="radio" name="sizes2" checked></input>

<input class="ui-radio" type="radio" name="states1"></input>
<input class="ui-radio" type="radio" name="states2" checked></input>
<input class="ui-radio" type="radio" name="states3" disabled></input>
<input class="ui-radio" type="radio" name="states4" checked disabled></input>

<input class="ui-radio ui-radio--error" type="radio" name="error1"></input>
<input class="ui-radio ui-radio--error" type="radio" name="error2" checked></input>
<input class="ui-radio ui-radio--success" type="radio" name="success1"></input>
<input class="ui-radio ui-radio--success" type="radio" name="success2" checked></input>

<label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
  <input class="ui-radio" type="radio" name="labeled"></input>
  <span>Option one</span>
</label>

<fieldset class="" style="border: none; padding: 0; margin: 0">
  <legend style="font-weight: 600; margin-block-end: var(--ui-space-1);">Choose an option</legend>
  <div class="ui-column" style="--column-gap: var(--ui-space-1);">
    <label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
      <input class="ui-radio" type="radio" name="group-demo" checked></input>
      <span>Option A</span>
    </label>
    <label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
      <input class="ui-radio" type="radio" name="group-demo"></input>
      <span>Option B</span>
    </label>
    <label class="ui-row " style="gap: var(--ui-space-1); cursor: pointer">
      <input class="ui-radio" type="radio" name="group-demo"></input>
      <span>Option C</span>
    </label>
  </div>
</fieldset>

<fieldset class="ui-radio-group">
  <legend class="ui-radio-group__legend">Payment method</legend>
  <div class="ui-radio-group__items">
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="payment" checked></input>
      <span>Credit card</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="payment"></input>
      <span>Debit card</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="payment"></input>
      <span>Bank transfer</span>
    </label>
  </div>
</fieldset>

<fieldset class="ui-radio-group ui-radio-group--horizontal">
  <legend class="ui-radio-group__legend">Size</legend>
  <div class="ui-radio-group__items">
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="size" checked></input>
      <span>Small</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="size"></input>
      <span>Medium</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="size"></input>
      <span>Large</span>
    </label>
  </div>
</fieldset>

<fieldset class="ui-radio-group ui-radio-group--compact">
  <legend class="ui-radio-group__legend">Priority</legend>
  <div class="ui-radio-group__items">
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="priority" checked></input>
      <span>Low</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="priority"></input>
      <span>Medium</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="priority"></input>
      <span>High</span>
    </label>
  </div>
</fieldset>

<fieldset class="ui-radio-group ui-radio-group--error">
  <legend class="ui-radio-group__legend">Shipping</legend>
  <div class="ui-radio-group__items">
    <label class="ui-radio-group__item">
      <input class="ui-radio ui-radio--error" type="radio" name="shipping"></input>
      <span>Standard</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio ui-radio--error" type="radio" name="shipping"></input>
      <span>Express</span>
    </label>
  </div>
  <span class="ui-form-error">Please select a shipping method</span>
</fieldset>

<fieldset class="ui-radio-group" disabled>
  <legend class="ui-radio-group__legend">Plan (locked)</legend>
  <div class="ui-radio-group__items">
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="plan" checked></input>
      <span>Free</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="plan"></input>
      <span>Pro</span>
    </label>
    <label class="ui-radio-group__item">
      <input class="ui-radio" type="radio" name="plan"></input>
      <span>Enterprise</span>
    </label>
  </div>
</fieldset>