Checkbox

Native checkboxes with theme colors, sizes and an indeterminate state.

Bootstrap’s checkbox docs describe the markup and CSS.

Example

Add bsCheck to an <input type="checkbox">. Bootstrap draws the checked and indeterminate marks with a CSS mask.

HTML

<input type="checkbox" bsCheck checked aria-label="Example checkbox" />

With form field

Put the checkbox in a bsFormField with a bsLabel. Bind it with [formControl], [(ngModel)], [formField] or [(checked)].

Send me the newsletter

Value: true

<div bsFormField>
  <input type="checkbox" bsCheck [formControl]="newsletter" />
  <label bsLabel>Send me the newsletter</label>
</div>
<p class="mt-2 mb-0">
  Value: <code>{{ newsletter.value }}</code>
</p>

Indeterminate

There is no HTML attribute for the indeterminate state, so bind [(indeterminate)]. The browser clears it when the user toggles the checkbox. This “select all” checkbox is indeterminate while only some items are checked.

All toppings

Cheese

Mushrooms

Olives

<div bsFormField>
  <input
    #allBox
    type="checkbox"
    bsCheck
    [checked]="all()"
    [indeterminate]="some()"
    (change)="setAll(allBox.checked)" />
  <label bsLabel>All toppings</label>
</div>
<div class="vstack gap-2 ms-4 mt-2">
  @for (topping of toppings(); track topping.name) {
    <div bsFormField>
      <input
        #box
        type="checkbox"
        bsCheck
        [checked]="topping.checked"
        (change)="set($index, box.checked)" />
      <label bsLabel>{{ topping.name }}</label>
    </div>
  }
</div>

Description

Put the label and a bsFormText in a .form-field-content. The checkbox’s aria-describedby points to the description.

Example checkboxSupporting description for the above label.

HTML

<div bsFormField>
  <input type="checkbox" bsCheck />
  <div class="form-field-content">
    <label bsLabel>Example checkbox</label>
    <small bsFormText>Supporting description for the above label.</small>
  </div>
</div>

Theme colors

Set theme to color the checked checkbox.

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

Disabled

Disabled checkboxes and their labels are shown lighter.

Disabled checkbox

Disabled checked checkbox

HTML

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

Sizes

Set size to sm or lg.

Small checkbox

Default checkbox

Large checkbox

HTML

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

API

BsCheck

Selector: input[type=checkbox][bsCheck] · Exported as: bsCheck

Inputs

Name	Type	Default	Description
`theme`	`BsTheme \| null`	`null`	Theme color of the checked checkbox.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the checkbox.
`indeterminate`	`boolean`	`false`	Shows the indeterminate mark. Supports [(indeterminate)].
`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.

Outputs

Name	Type	Description
`indeterminateChange`	`boolean`	Emits false when the user toggles an indeterminate checkbox.