Skip to documentation
BoobstrapDocs
Forms

Checkboxes and radios

Build checkboxes, descriptions, inline choices, radio groups, switches, and disabled states.

Forms guideCopy-ready referencev0.7.0 current
Forms

Checkboxes and radios

Use checkboxes for independent choices, radios for one choice from a set, and switches for immediate binary settings.

Checkbox group

Notifications
HTML · Checkbox group
<fieldset class="bs-check-group">
  <legend class="bs-label">Notifications</legend>
  <label class="bs-check">
    <input
      class="bs-check-input"
      type="checkbox"
      name="notifications"
      value="events"
    />
    <span class="bs-check-label">Event invitations</span>
  </label>
  <label class="bs-check">
    <input
      class="bs-check-input"
      type="checkbox"
      name="notifications"
      value="product"
      checked
    />
    <span class="bs-check-label">Product updates</span>
    <span class="bs-check-description">
      Monthly release notes and migration guidance.
    </span>
  </label>
  <label class="bs-check">
    <input
      class="bs-check-input"
      type="checkbox"
      name="notifications"
      value="legacy"
      disabled
    />
    <span class="bs-check-label">Legacy notices</span>
  </label>
</fieldset>

Radio group

Billing cycle
HTML · Radio group
<fieldset class="bs-check-group">
  <legend class="bs-label">Billing cycle</legend>
  <label class="bs-check"><input class="bs-check-input" type="radio" name="billing_cycle" value="monthly" checked /><span class="bs-check-label">Monthly</span></label>
  <label class="bs-check"><input class="bs-check-input" type="radio" name="billing_cycle" value="yearly" /><span class="bs-check-label">Yearly</span></label>
</fieldset>

Switch

HTML · Switch
<label class="bs-check bs-switch">
  <input class="bs-check-input" type="checkbox" name="security_alerts" checked />
  <span class="bs-check-label">Security alerts</span>
</label>

Inline radio choices

Density
HTML · Inline radios
<fieldset>
  <legend class="bs-label">Density</legend>
  <label class="bs-check bs-check-inline"><input class="bs-check-input" type="radio" name="density" value="comfortable" checked /><span class="bs-check-label">Comfortable</span></label>
  <label class="bs-check bs-check-inline"><input class="bs-check-input" type="radio" name="density" value="compact" /><span class="bs-check-label">Compact</span></label>
</fieldset>
Group choices: wrap related controls in <fieldset> and name the set with <legend>. Radios in one set must share the same name.