Checkbox — Boobstrap

The .bs-check and .bs-check-input classes style semantic native checkboxes with theme tokens, high-contrast borders, focus rings, and dark mode support.

Basic checkbox

Checkbox with description

HTML · Checkbox with description

<label class="bs-check">
  <input class="bs-check-input" type="checkbox" name="analytics" checked />
  <span class="bs-check-label">Usage analytics</span>
  <span class="bs-check-description">
    Share anonymous telemetry to help us improve performance and stability.
  </span>
</label>

Checkbox group

HTML · Checkbox group

<fieldset class="bs-check-group">
  <legend class="bs-label">Notification channels</legend>
  <label class="bs-check">
    <input class="bs-check-input" type="checkbox" name="notifications" value="email" checked />
    <span class="bs-check-label">Email notifications</span>
    <span class="bs-check-description">Daily digests and security advisories.</span>
  </label>
  <label class="bs-check">
    <input class="bs-check-input" type="checkbox" name="notifications" value="sms" />
    <span class="bs-check-label">SMS alerts</span>
    <span class="bs-check-description">Critical infrastructure incidents only.</span>
  </label>
  <label class="bs-check">
    <input class="bs-check-input" type="checkbox" name="notifications" value="webhook" />
    <span class="bs-check-label">Webhook events</span>
  </label>
</fieldset>

Inline checkboxes

HTML · Inline checkboxes

<fieldset>
  <legend class="bs-label">Supported platforms</legend>
  <label class="bs-check bs-check-inline">
    <input class="bs-check-input" type="checkbox" name="platform" value="macos" checked />
    <span class="bs-check-label">macOS</span>
  </label>
  <label class="bs-check bs-check-inline">
    <input class="bs-check-input" type="checkbox" name="platform" value="linux" checked />
    <span class="bs-check-label">Linux</span>
  </label>
  <label class="bs-check bs-check-inline">
    <input class="bs-check-input" type="checkbox" name="platform" value="windows" />
    <span class="bs-check-label">Windows</span>
  </label>
</fieldset>

Disabled state

HTML · Disabled checkboxes

<label class="bs-check">
  <input class="bs-check-input" type="checkbox" disabled />
  <span class="bs-check-label">Enterprise SSO (Unavailable on your plan)</span>
</label>

<label class="bs-check">
  <input class="bs-check-input" type="checkbox" checked disabled />
  <span class="bs-check-label">Two-factor authentication (Mandatory)</span>
</label>

Valid state

HTML · Valid checkbox

<div class="bs-form-group">
  <label class="bs-check">
    <input class="bs-check-input bs-is-valid" type="checkbox" checked aria-invalid="false" aria-describedby="valid-msg" />
    <span class="bs-check-label">I have verified my backup recovery codes</span>
  </label>
  <span class="bs-form-feedback bs-form-feedback-valid" id="valid-msg">Verification confirmed.</span>
</div>

Invalid state

Set aria-invalid="true" or apply .bs-is-invalid when validation fails. The checkbox highlights with a danger border and focus outline, and .bs-form-feedback-invalid renders the associated error text.

HTML · Invalid checkbox

<div class="bs-form-group">
  <fieldset class="bs-check-group">
    <legend class="bs-label">Terms of service <span class="bs-label-required" aria-hidden="true">*</span></legend>
    <label class="bs-check">
      <input
        class="bs-check-input"
        type="checkbox"
        name="terms"
        aria-invalid="true"
        aria-describedby="terms-error"
        required
      />
      <span class="bs-check-label">I agree to the terms of service and privacy policy</span>
    </label>
    <span class="bs-form-feedback bs-form-feedback-invalid" id="terms-error">
      You must accept the terms before creating an account.
    </span>
  </fieldset>
</div>

Accessible grouping

Wrap related checkbox collections in <fieldset class="bs-check-group"> and label the set using <legend class="bs-label">.

Help and error text

Pair auxiliary messages using aria-describedby pointing to the id of the helper text or error message.

Indeterminate state

Set input.indeterminate = true in JavaScript for parent checkboxes that represent partially selected child groups.

Checkbox API

Checkbox components provide custom check indicators, label positioning, supporting descriptions, and validation feedback.

Class	Purpose
`.bs-check`	Container wrapper binding checkbox input, label, and optional description.
`.bs-check-input`	Custom-styled checkbox input using theme tokens, checkmark SVGs, and focus rings.
`.bs-check-label`	Primary label text positioned directly beside the check input.
`.bs-check-description`	Supporting description text indented under the checkbox label.
`.bs-check-group`	Fieldset container grouping multiple related checkboxes vertically.
`.bs-check-inline`	Positions multiple checkbox controls horizontally side by side.
`.bs-is-valid`	Positive validation state styling for checkbox controls.
`.bs-is-invalid`	Negative validation state styling with red error borders and focus highlights.
`.bs-form-feedback-valid`	Success message text associated with valid form input.
`.bs-form-feedback-invalid`	Error message text describing validation failures.