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. The checkbox should have a clear and consistent label that describes the option it represents.

Example

checkbox

code

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

Vertical Group

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

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

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

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

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
`accessor`		determines whether element is checked
`value`	`string \| number \| FormData \| File`
`checked`	`boolean`
`indeterminate`	`boolean`
`disabled`	`boolean`
`required`	`boolean`
`readonly`	`boolean`
`multiple`	`boolean`
`autocomplete`	`string`
`type`	`string`
`name`	`string`	represents the name of the current element as a string.
`pattern`	`string`
`placeholder`	`string`
`minLength`	`number`
`maxLength`	`number`
`min`	`number`
`max`	`number`
`size`	`number`
`valueAsNumber`
`formAssociated`	`boolean`
`focus`
`reset`

Attributes

Name	Types	Description
`accessor`		determines whether element is checked