Radio — Boobstrap

The .bs-check and .bs-check-input classes style native circular radio buttons for selecting exactly one option from a set.

Radio group

HTML · Radio group

<fieldset class="bs-check-group">
  <legend class="bs-label">Billing cadence</legend>
  <label class="bs-check">
    <input class="bs-check-input" type="radio" name="billing" value="monthly" checked />
    <span class="bs-check-label">Monthly billing</span>
  </label>
  <label class="bs-check">
    <input class="bs-check-input" type="radio" name="billing" value="annual" />
    <span class="bs-check-label">Annual billing (Save 20%)</span>
  </label>
</fieldset>

Radio with descriptions

HTML · Radio with descriptions

<fieldset class="bs-check-group">
  <legend class="bs-label">Deployment environment</legend>
  <label class="bs-check">
    <input class="bs-check-input" type="radio" name="env" value="production" checked />
    <span class="bs-check-label">Production</span>
    <span class="bs-check-description">
      Live traffic with multi-region redundancy and automatic failover.
    </span>
  </label>
  <label class="bs-check">
    <input class="bs-check-input" type="radio" name="env" value="staging" />
    <span class="bs-check-label">Staging</span>
    <span class="bs-check-description">
      Pre-release preview environment mirrored from production data.
    </span>
  </label>
</fieldset>

Inline radios

HTML · Inline radios

<fieldset>
  <legend class="bs-label">Color mode preference</legend>
  <label class="bs-check bs-check-inline">
    <input class="bs-check-input" type="radio" name="theme_pref" value="system" checked />
    <span class="bs-check-label">System</span>
  </label>
  <label class="bs-check bs-check-inline">
    <input class="bs-check-input" type="radio" name="theme_pref" value="dark" />
    <span class="bs-check-label">Dark</span>
  </label>
  <label class="bs-check bs-check-inline">
    <input class="bs-check-input" type="radio" name="theme_pref" value="light" />
    <span class="bs-check-label">Light</span>
  </label>
</fieldset>

Disabled state

HTML · Disabled radios

<fieldset class="bs-check-group">
  <legend class="bs-label">Database tier</legend>
  <label class="bs-check">
    <input class="bs-check-input" type="radio" name="db_tier" value="shared" checked disabled />
    <span class="bs-check-label">Shared cluster (Active)</span>
  </label>
  <label class="bs-check">
    <input class="bs-check-input" type="radio" name="db_tier" value="dedicated" disabled />
    <span class="bs-check-label">Dedicated instance (Requires enterprise plan)</span>
  </label>
</fieldset>

Valid state

HTML · Valid radio

<div class="bs-form-group">
  <fieldset class="bs-check-group">
    <legend class="bs-label">Payment method</legend>
    <label class="bs-check">
      <input
        class="bs-check-input bs-is-valid"
        type="radio"
        name="payment"
        value="card"
        checked
        aria-invalid="false"
        aria-describedby="pay-feedback"
      />
      <span class="bs-check-label">Credit / Debit card (ending in 4242)</span>
    </label>
    <span class="bs-form-feedback bs-form-feedback-valid" id="pay-feedback">
      Card verified and ready for payment.
    </span>
  </fieldset>
</div>

Invalid state

Apply aria-invalid="true" or .bs-is-invalid to a required radio group that has not received a valid selection. The radio circles highlight in danger red and display the invalid message.

HTML · Invalid radio group

<div class="bs-form-group">
  <fieldset class="bs-check-group">
    <legend class="bs-label">Storage location <span class="bs-label-required" aria-hidden="true">*</span></legend>
    <label class="bs-check">
      <input
        class="bs-check-input"
        type="radio"
        name="region"
        value="us"
        aria-invalid="true"
        aria-describedby="region-error"
        required
      />
      <span class="bs-check-label">North America (US East)</span>
    </label>
    <label class="bs-check">
      <input
        class="bs-check-input"
        type="radio"
        name="region"
        value="eu"
        aria-invalid="true"
        aria-describedby="region-error"
      />
      <span class="bs-check-label">Europe (Frankfurt)</span>
    </label>
    <span class="bs-form-feedback bs-form-feedback-invalid" id="region-error">
      Please select a primary storage region.
    </span>
  </fieldset>
</div>

Shared name attribute

Ensure all radio options within the same group share the exact same name attribute to guarantee mutual exclusivity.

Keyboard navigation

Radio groups support arrow-key navigation out of the box with native browser accessibility.

Radio API

Radio classes style mutually exclusive option sets, alignment, label association, and error feedback.

Class	Purpose
`.bs-check`	Container element wrapping radio input, label text, and description.
`.bs-check-input`	Circular custom radio indicator with inner dot styling on checked state.
`.bs-check-label`	Primary label text adjacent to the radio button.
`.bs-check-description`	Supporting explanatory text positioned under the radio label.
`.bs-check-group`	Fieldset container grouping mutually exclusive radio options vertically.
`.bs-check-inline`	Horizontal layout modifier arranging radio controls side by side.
`.bs-is-valid`	Positive validation state styling for radio controls.
`.bs-is-invalid`	Negative validation state styling with error border and focus accent.
`.bs-form-feedback-valid`	Success message text associated with valid group selection.
`.bs-form-feedback-invalid`	Error message text describing required or invalid radio choices.