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.
code
<bp-field>
<label>checkbox</label>
<bp-checkbox checked></bp-checkbox>
</bp-field>Vertical Group
Demonstrates checkbox groups in vertical form layout.
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.
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.
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.
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.
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-labelledbyoraria-labelto 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 |
|---|---|---|
value | string | number | FormData | File | Defines the value of the control when used in forms, submitted when the checkbox is checked |
checked | boolean | Controls the checked state of the checkbox |
indeterminate | boolean | Controls the indeterminate state, displaying a dash when neither fully checked nor unchecked |
disabled | boolean | determines if element is mutable or focusable |
required | boolean | indicates that the user must specify a value for the input before the owning form can be submitted |
readonly | boolean | makes the element not mutable, meaning the user can not edit the control |
multiple | boolean | determines he form control accepts one or more values |
autocomplete | string | provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field |
type | string | string specifying the type of control to render |
formNoValidate | boolean | determines if the form control is novalidate |
name | string | represents the name of the current |
pattern | string | regular expression the form control's value should match |
placeholder | string | defines a short hint to help the user with data entry when a form control has no value |
minLength | number | defines minimum number of characters |
maxLength | number | defines maximum number of characters |
min | number | defines the most negative value in the range of permitted values |
max | number | defines the greatest value in the range of permitted values |
size | number | determines number of characters |
formAssociated | boolean | |
valueAsNumber | ||
composedLabel | ||
focus | ||
reset |
Attributes
| Name | Types | Description |
|---|---|---|
value | string | number | FormData | File | Defines the value of the control when used in forms, submitted when the checkbox is checked |
checked | boolean | Controls the checked state of the checkbox |
indeterminate | boolean | Controls the indeterminate state, displaying a dash when neither fully checked nor unchecked |
disabled | boolean | determines if element is mutable or focusable |
required | boolean | indicates that the user must specify a value for the input before the owning form can be submitted |
readonly | boolean | makes the element not mutable, meaning the user can not edit the control |
multiple | boolean | determines he form control accepts one or more values |
autocomplete | string | provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field |
type | string | string specifying the type of control to render |
formNoValidate | boolean | determines if the form control is novalidate |
pattern | string | regular expression the form control's value should match |
placeholder | string | defines a short hint to help the user with data entry when a form control has no value |
minLength | number | defines minimum number of characters |
maxLength | number | defines maximum number of characters |
min | number | defines the most negative value in the range of permitted values |
max | number | defines the greatest value in the range of permitted values |
size | number | determines number of characters |