Forms

Switch

Build accessible on/off toggle switches, descriptions, groups, disabled states, and validation feedback.

Forms guideCopy-ready referencev0.7.0 current

Forms

Switch

The .bs-switch modifier turns any .bs-check checkbox into a toggle switch with smooth pill animations and full keyboard accessibility.

Basic switch

Airplane mode

HTML · Basic switch

<label class="bs-check bs-switch">
  <input class="bs-check-input" type="checkbox" name="airplane_mode" />
  <span class="bs-check-label">Airplane mode</span>
</label>

Checked state

Wi-Fi networking (Active)

HTML · Checked switch

<label class="bs-check bs-switch">
  <input class="bs-check-input" type="checkbox" name="wifi" checked />
  <span class="bs-check-label">Wi-Fi networking (Active)</span>
</label>

Switch with descriptions

Automatic deploymentTrigger preview deployments automatically on every commit to pull requests.

HTML · Switch with description

<label class="bs-check bs-switch">
  <input class="bs-check-input" type="checkbox" name="auto_deploy" checked />
  <span class="bs-check-label">Automatic deployment</span>
  <span class="bs-check-description">
    Trigger preview deployments automatically on every commit to pull requests.
  </span>
</label>

Switch group

Security preferences Multi-factor authentication Require a hardware key or TOTP token on sign-in. Single concurrent session Terminate previous sessions when signing in elsewhere.

HTML · Switch group

<fieldset class="bs-check-group">
  <legend class="bs-label">Security preferences</legend>
  <label class="bs-check bs-switch">
    <input class="bs-check-input" type="checkbox" name="mfa" checked />
    <span class="bs-check-label">Multi-factor authentication</span>
    <span class="bs-check-description">Require a hardware key or TOTP token on sign-in.</span>
  </label>
  <label class="bs-check bs-switch">
    <input class="bs-check-input" type="checkbox" name="single_session" checked />
    <span class="bs-check-label">Single concurrent session</span>
    <span class="bs-check-description">Terminate previous sessions when signing in elsewhere.</span>
  </label>
</fieldset>

Disabled state

Early access previews (Unavailable)Compliance audit log (Enforced)

HTML · Disabled switches

<label class="bs-check bs-switch">
  <input class="bs-check-input" type="checkbox" disabled />
  <span class="bs-check-label">Early access previews (Unavailable)</span>
</label>

<label class="bs-check bs-switch">
  <input class="bs-check-input" type="checkbox" checked disabled />
  <span class="bs-check-label">Compliance audit log (Enforced)</span>
</label>

Valid state

Enforce HTTPS & TLS 1.3TLS certificate active and verified.

HTML · Valid switch

<div class="bs-form-group">
  <label class="bs-check bs-switch">
    <input class="bs-check-input bs-is-valid" type="checkbox" checked aria-invalid="false" aria-describedby="ssl-msg" />
    <span class="bs-check-label">Enforce HTTPS & TLS 1.3</span>
  </label>
  <span class="bs-form-feedback bs-form-feedback-valid" id="ssl-msg">
    TLS certificate active and verified.
  </span>
</div>

Invalid state

Apply aria-invalid="true" or .bs-is-invalid when a required switch setting has not been confirmed or accepted. The switch track and focus ring show the danger tone and the error message appears below.

Production migration Confirm schema migration on live production clusterYou must enable the confirmation toggle before running database migrations.

HTML · Invalid switch

<div class="bs-form-group">
  <fieldset class="bs-check-group">
    <legend class="bs-label">Production migration <span class="bs-label-required" aria-hidden="true">*</span></legend>
    <label class="bs-check bs-switch">
      <input
        class="bs-check-input"
        type="checkbox"
        name="confirm_migration"
        aria-invalid="true"
        aria-describedby="migration-error"
        required
      />
      <span class="bs-check-label">Confirm schema migration on live production cluster</span>
    </label>
    <span class="bs-form-feedback bs-form-feedback-invalid" id="migration-error">
      You must enable the confirmation toggle before running database migrations.
    </span>
  </fieldset>
</div>

Instant settings

Switches represent instant on/off toggles. For multi-field forms submitted via a button, standard checkboxes are often preferred.

Role="switch" support

Add role="switch" to the input element when appropriate for screen reader software to announce the control as a switch.

Switch API

Switch classes format smooth sliding toggle switches with label association and validation feedback.

Class	Purpose
`.bs-check`	Base wrapper element binding input, label, and description.
`.bs-switch`	Modifier turning standard check input into a smooth pill-shaped toggle switch.
`.bs-check-input`	Switch checkbox input element with sliding thumb animation.
`.bs-check-label`	Label text adjacent to the toggle switch.
`.bs-check-description`	Supporting explanatory description text indented below the switch label.
`.bs-check-group`	Fieldset container grouping multiple switches into an organized list.
`.bs-is-valid`	Positive validation state styling for switch controls.
`.bs-is-invalid`	Negative validation state styling with error border and track highlights.
`.bs-form-feedback-valid`	Success message text associated with valid switch state.
`.bs-form-feedback-invalid`	Error message text describing required or invalid switch toggles.