lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubIntegrationsAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationDrag and DropKeyboard NavigationLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPagePaginationPanelPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVClipboardColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

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

Vertical Group

message text disabled message error message 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

message text disabled message error message 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

message text disabled message error message 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

message text disabled message error message 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

message text disabled message error message 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

NameTypesDescription
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
valuestring | number | FormData | Filedetermines initial value of the control
checkedbooleandetermines whether element is checked
indeterminateboolean
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
typestringstring specifying the type of control to render
formNoValidatebooleandetermines if the form control is novalidate
namestringrepresents the name of the current
element as a string.
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters
formAssociatedboolean
valueAsNumber
composedLabel
focus
reset

Attributes

NameTypesDescription
valuestring | number | FormData | Filedetermines initial value of the control
checkedbooleandetermines whether element is checked
indeterminateboolean
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
typestringstring specifying the type of control to render
formNoValidatebooleandetermines if the form control is novalidate
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters