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 the .ro-input-checkbox class for custom checkbox styling. For best accessibility, nest the <input> inside the <label> element. This links them semantically and makes the label text clickable.

<label>
<input type="checkbox" class="ro-input-checkbox"/> Unchecked
</label>

<label>
<input type="checkbox" class="ro-input-checkbox" checked/> Checked
</label>

<label>
<input type="checkbox" class="ro-input-checkbox" disabled/> Disabled
</label>

<label>
<input type="checkbox" class="ro-input-checkbox" disabled checked/> Checked Disabled
</label>

<label>
<input type="checkbox" class="ro-input-checkbox ro-selected-some"/> Indeterminate
</label>

Preview

Unchecked Checked Disabled Checked Disabled Indeterminate

Sizing

Checkboxes support different sizes using modifier classes.

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

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

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

Preview

Small Default Large

---

Radio Buttons

Use the .ro-input-radio class for custom radio buttons. Radio buttons are used when a user must select only one option from a set.

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

Preview

Option 1

Option 2 (Selected)

Disabled

---

Switch

Use the .ro-switch class on a checkbox input to create a toggle switch, typically used for binary on/off states.

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

Preview

Enable Feature

Disabled

Sizing

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

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

Preview

Default Size

Small Size

---

Properties

Checkbox

Class	Default	Description
.ro-selected-some, :indeterminate	-	Indeterminate state indicator
.ro-size-*	md	Options: sm, lg

Switch

Attribute	Default	Description
data-ro-size="sm"	-	Small switch size