Checkbox

Checkboxes are used to select one or more options from a list. They are not intended for lists where only one option can be selected. Each checkbox can be selected independently of the others.

Example

Allows users to toggle between checked and unchecked states for binary choices.

checkbox

code

<bp-field>
  <label>checkbox</label>
  <bp-checkbox checked></bp-checkbox>
</bp-field>

Vertical Group

Demonstrates checkbox groups in vertical form layout.

label checkbox 1

checkbox 2

checkbox 3

message text

disabled checkbox 1

checkbox 2

checkbox 3

disabled message

error checkbox 1

checkbox 2

checkbox 3

error message

success checkbox 1

checkbox 2

checkbox 3

success message

code

<bp-form-group layout="vertical">
  <bp-fieldset layout="vertical">
    <label>label</label>

    <label>checkbox 1</label>
    <bp-checkbox value="1" checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox value="2"></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox value="3"></bp-checkbox>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <!-- disable all controls within group or set disabled on input individually -->
  <bp-fieldset layout="vertical" disabled>
    <label>disabled</label>

    <label>checkbox 1</label>
    <bp-checkbox checked disabled></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox disabled></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox disabled></bp-checkbox>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical" status="error">
    <label>error</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical" status="success">
    <label>success</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Vertical Inline Group

Demonstrates checkbox groups in vertical inline form layout.

label checkbox 1

checkbox 2

checkbox 3

message text

disabled checkbox 1

checkbox 2

checkbox 3

disabled message

error checkbox 1

checkbox 2

checkbox 3

error message

success checkbox 1

checkbox 2

checkbox 3

success message

code

<bp-form-group layout="vertical-inline">
  <bp-fieldset layout="vertical-inline">
    <label>label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" disabled>
    <label>disabled</label>

    <label>checkbox 1</label>
    <bp-checkbox checked disabled></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox disabled></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox disabled></bp-checkbox>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" status="error">
    <label>error</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" status="success">
    <label>success</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Horizontal Group

Demonstrates checkbox groups in horizontal form layout.

label checkbox 1

checkbox 2

checkbox 3

message text

disabled checkbox 1

checkbox 2

checkbox 3

disabled message

error checkbox 1

checkbox 2

checkbox 3

error message

success checkbox 1

checkbox 2

checkbox 3

success message

code

<bp-form-group layout="horizontal">
  <bp-fieldset layout="horizontal">
    <label>label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" disabled>
    <label>disabled</label>

    <label>checkbox 1</label>
    <bp-checkbox checked disabled></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox disabled></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox disabled></bp-checkbox>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" status="error">
    <label>error</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" status="success">
    <label>success</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Horizontal Inline Group

Demonstrates checkbox groups in horizontal inline form layout.

label checkbox 1

checkbox 2

checkbox 3

message text

disabled checkbox 1

checkbox 2

checkbox 3

disabled message

error checkbox 1

checkbox 2

checkbox 3

error message

success checkbox 1

checkbox 2

checkbox 3

success message

code

<bp-form-group layout="horizontal-inline">
  <bp-fieldset layout="horizontal-inline">
    <label>label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline" disabled>
    <label>disabled</label>

    <label>checkbox 1</label>
    <bp-checkbox checked disabled></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox disabled></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox disabled></bp-checkbox>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline" status="error">
    <label>error</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline" status="success">
    <label>success</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Compact Group

Demonstrates checkbox groups in compact form layout.

label checkbox 1

checkbox 2

checkbox 3

message text

disabled checkbox 1

checkbox 2

checkbox 3

disabled message

error checkbox 1

checkbox 2

checkbox 3

error message

success checkbox 1

checkbox 2

checkbox 3

success message

code

<bp-form-group layout="compact">
  <bp-fieldset layout="compact">
    <label>label</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" disabled>
    <label>disabled</label>

    <label>checkbox 1</label>
    <bp-checkbox checked disabled></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox disabled></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox disabled></bp-checkbox>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" status="error">
    <label>error</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" status="success">
    <label>success</label>

    <label>checkbox 1</label>
    <bp-checkbox checked></bp-checkbox>

    <label>checkbox 2</label>
    <bp-checkbox></bp-checkbox>

    <label>checkbox 3</label>
    <bp-checkbox></bp-checkbox>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/checkbox.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/checkbox.js/+esm';
</script>

Accessibility

Use a label to provide a clear and concise description of the checkbox option.
Use aria-labelledby or aria-label to provide an accessible name for the checkbox for screen readers.

bp-checkbox

Events

Name	Types	Description
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description