Switch

A toggle switch built on a native checkbox.

Bootstrap’s switch docs describe the markup and CSS.

Example

Put a bsSwitch checkbox in a bsSwitch wrapper. The input gets role="switch" and the native switch attribute, which gives haptic feedback where supported.

HTML

<div bsSwitch>
  <input type="checkbox" bsSwitch aria-label="Example switch" />
</div>

With form field

Put the switch in a bsFormField with a bsLabel, and bind the input like any checkbox.

Wi-Fi is on

<div bsFormField>
  <div bsSwitch>
    <input type="checkbox" bsSwitch [(ngModel)]="wifi" />
  </div>
  <label bsLabel>Wi-Fi is {{ wifi() ? 'on' : 'off' }}</label>
</div>

Theme colors

Set theme on the wrapper.

<div class="vstack gap-2">
  @for (theme of themes; track theme) {
    <div bsFormField>
      <div bsSwitch [theme]="theme">
        <input type="checkbox" bsSwitch checked />
      </div>
      <label bsLabel>Example {{ theme }} switch</label>
    </div>
  }
</div>

Disabled

Disabled switches and their labels are shown lighter.

Disabled switch

Disabled checked switch

HTML

<div class="vstack gap-2">
  <div bsFormField>
    <div bsSwitch>
      <input type="checkbox" bsSwitch disabled />
    </div>
    <label bsLabel>Disabled switch</label>
  </div>
  <div bsFormField>
    <div bsSwitch>
      <input type="checkbox" bsSwitch disabled checked />
    </div>
    <label bsLabel>Disabled checked switch</label>
  </div>
</div>

Sizes

Set size on the wrapper to sm or lg.

Small switch

Default switch

Large switch

HTML

<div class="vstack gap-3">
  <div bsFormField>
    <div bsSwitch size="sm">
      <input type="checkbox" bsSwitch />
    </div>
    <label bsLabel>Small switch</label>
  </div>
  <div bsFormField>
    <div bsSwitch>
      <input type="checkbox" bsSwitch />
    </div>
    <label bsLabel>Default switch</label>
  </div>
  <div bsFormField>
    <div bsSwitch size="lg">
      <input type="checkbox" bsSwitch />
    </div>
    <label bsLabel>Large switch</label>
  </div>
</div>

Custom width

Override the --bs-switch-width and --bs-switch-indicator-width CSS variables for any width.

Custom width switch

HTML

<div bsFormField>
  <div bsSwitch style="--bs-switch-width: 2.75rem; --bs-switch-indicator-width: 1.5rem">
    <input type="checkbox" bsSwitch />
  </div>
  <label bsLabel>Custom width switch</label>
</div>

API

BsSwitch

Selector: div[bsSwitch] · Exported as: bsSwitch

Inputs

Name	Type	Default	Description
`theme`	`BsTheme \| null`	`null`	Theme color of the checked switch.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the switch.

BsSwitchInput

Selector: input[type=checkbox][bsSwitch] · Exported as: bsSwitchInput

Inputs

Name	Type	Default	Description
`id`	`string`	`generated`	Element id. Generated when not set, and used for the field’s label.
`validation`	`'auto' \| 'valid' \| 'invalid' \| 'none'`	`'auto'`	Validation styles. auto follows the bound Angular form control.