Checkboxes and Radios

This page covers selection controls like checkboxes, radio buttons, and switches, which allow users to make choices from a set of options. ✅

Checkbox

Use label.ro-input-option wrapping the input and a <span> label text.

<div class="ro-field">
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" />
    <span>Default checkbox</span>
  </label>
</div>

<div class="ro-field">
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" checked />
    <span>Checked</span>
  </label>
</div>

<div class="ro-field">
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" disabled />
    <span>Disabled</span>
  </label>
</div>

<div class="ro-field">
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox ro-selected-some" />
    <span>Indeterminate</span>
  </label>
</div>

Preview

Default checkbox

Checked

Disabled

Indeterminate

Sizing

Checkboxes support different sizes using modifier classes.

<label class="ro-input-option">
  <input type="checkbox" class="ro-input-checkbox ro-size-sm" />
  <span>Small</span>
</label>

<label class="ro-input-option">
  <input type="checkbox" class="ro-input-checkbox" />
  <span>Default</span>
</label>

<label class="ro-input-option">
  <input type="checkbox" class="ro-input-checkbox ro-size-lg" />
  <span>Large</span>
</label>

Preview

Small Default Large

---

Radio Buttons

Use label.ro-input-option with .ro-input-radio.

<label class="ro-input-option">
  <input type="radio" class="ro-input-radio" name="radios" />
  <span>Option 1</span>
</label>
<label class="ro-input-option">
  <input type="radio" class="ro-input-radio" name="radios" checked />
  <span>Option 2 (Selected)</span>
</label>
<label class="ro-input-option">
  <input type="radio" class="ro-input-radio" name="radios-disabled" disabled />
  <span>Disabled</span>
</label>

Preview

Option 1Option 2 (Selected)Disabled

---

Switch

Use label.ro-input-option with .ro-switch on a checkbox input.

<label class="ro-input-option">
  <input type="checkbox" class="ro-switch" checked />
  <span>Enable Feature</span>
</label>
<label class="ro-input-option">
  <input type="checkbox" class="ro-switch" disabled />
  <span>Disabled</span>
</label>

Preview

Enable FeatureDisabled

Sizing

Use the data-ro-size="sm" attribute to create a smaller, more compact switch.

<label class="ro-input-option">
  <input type="checkbox" class="ro-switch" />
  <span>Default Size</span>
</label>
<label class="ro-input-option">
  <input type="checkbox" class="ro-switch" data-ro-size="sm" />
  <span>Small switch</span>
</label>

Preview

Default SizeSmall Size

---

Radio group

Use <fieldset class="ro-radio-group"> to group related radio options. Add a <legend> for the group label. Each option uses label.ro-input-option with a shared name on the radios.

<fieldset class="ro-radio-group">
  <legend>Billing period</legend>
  <label class="ro-input-option">
    <input type="radio" class="ro-input-radio" name="billing" value="monthly" checked />
    <span>Monthly</span>
  </label>
  <label class="ro-input-option">
    <input type="radio" class="ro-input-radio" name="billing" value="quarterly" />
    <span>Quarterly</span>
  </label>
  <label class="ro-input-option">
    <input type="radio" class="ro-input-radio" name="billing" value="yearly" />
    <span>Yearly</span>
  </label>
</fieldset>

Preview

Billing period

MonthlyQuarterlyYearly

Add .ro-dir-horizontal on the fieldset to lay options out on one line.

<fieldset class="ro-radio-group ro-dir-horizontal">
  <legend>Size</legend>
  <label class="ro-input-option">
    <input type="radio" class="ro-input-radio" name="size" value="sm" />
    <span>Small</span>
  </label>
  <label class="ro-input-option">
    <input type="radio" class="ro-input-radio" name="size" value="md" checked />
    <span>Medium</span>
  </label>
  <label class="ro-input-option">
    <input type="radio" class="ro-input-radio" name="size" value="lg" />
    <span>Large</span>
  </label>
</fieldset>

Preview

Size

SmallMediumLarge

---

Checkbox group

Use <fieldset class="ro-checkbox-group"> for multi-select options. Checkboxes do not need a shared name.

<fieldset class="ro-checkbox-group">
  <legend>Notification channels</legend>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" checked />
    <span>Email</span>
  </label>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" />
    <span>SMS</span>
  </label>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" checked />
    <span>Push</span>
  </label>
</fieldset>

Preview

Notification channels

EmailSMSPush

Select all

Place a parent checkbox above the group options. Use .ro-selected-some or the native :indeterminate property for a partial selection state (requires JavaScript to sync checked states).

<fieldset class="ro-checkbox-group">
  <legend>Permissions</legend>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox ro-selected-some" />
    <span>Select all</span>
  </label>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" checked />
    <span>Read</span>
  </label>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" />
    <span>Write</span>
  </label>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-input-checkbox" checked />
    <span>Delete</span>
  </label>
</fieldset>

Preview

Permissions

Select allReadWriteDelete

Switch group

Stack switches inside .ro-checkbox-group (switches use the same label.ro-input-option row pattern).

<fieldset class="ro-checkbox-group">
  <legend>Feature flags</legend>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-switch" checked />
    <span>Dark mode</span>
  </label>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-switch" />
    <span>Analytics</span>
  </label>
  <label class="ro-input-option">
    <input type="checkbox" class="ro-switch" data-ro-size="sm" />
    <span>Beta features (small)</span>
  </label>
</fieldset>

Preview

Feature flags

Dark modeAnalyticsBeta features (small)

---

Properties

Checkbox

Class	Default	Description
.ro-input-checkbox	md (20px)	Checkbox input.
.ro-selected-some, :indeterminate	-	Indeterminate state (equivalent styling).
.ro-size-sm, .ro-size-lg	md	Checkbox sizes.
.ro-state-invalid	-	Danger styling when unchecked (on input or parent field).
.ro-input-option	-	Label row wrapper for checkbox, radio, or switch.

Radio

Class	Description
.ro-input-radio	Radio input (no size or invalid modifiers).

Switch

Class / attribute	Default	Description
.ro-switch	md	Toggle switch.
data-ro-size="sm", .ro-size-sm	md	Small switch.

Option groups

Class	Description
.ro-radio-group	Radio fieldset wrapper.
.ro-checkbox-group	Checkbox or switch fieldset wrapper.
.ro-dir-horizontal	Horizontal, wrapping layout on a group.