Checkbox

Calcite Checkboxes are small, square decision making components used for optional choice or multi-selectable lists.

Overview

Checkboxes are designed to be used for yes/no interactions or interactions where a choice is optional. Use Checkbox for interactions when a multi-select list is needed.

For single choice interactions, please consider Radio Button or Radio Group. The key difference between a Checkbox and Radio is that Radios must always have something active, whereas the Checkbox utility is optional.

For on/off interactions, also consider Switch.

Usage

  • Yes/no interactions
  • Boolean
  • Workflows where multi-selection is needed
  • Forms

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
SpaceToggle checkbox
TabMove focus in and out of component
Tab and ShiftMove focus in and out of component

Writing and copy

Keep labels for Checkboxes simple and succinct. Do not use contractions (you're, aren't, can't, haven't) for Checkbox labels in order to reduce confusion. Avoid writing Checkbox text as a question.

A label for a Checkbox can denote its action as additive or subtractive. For example:

  • Save info for later (additive)
  • Invite me to the user testing group (additive)
  • Delete locally after upload (subtractive)
  • Remove user metadata (subtractive)
Do Checkbox writing
Do stay consise with Checkbox labels.
Avoid Checkbox writing
Avoid long Checkbox labels, and avoid forming the text as a question.

API reference

calcite-checkbox
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
checkedchecked

The checked state of the checkbox.

booleanA boolean property should be present, or not
truefalse
disableddisabled

True if the checkbox is disabled

booleanA boolean property should be present, or not
truefalse
guidguid

The id attribute of the checkbox. When omitted, a globally unique identifier is used.

stringA custom string
undefined
indeterminateindeterminate

True if the checkbox is initially indeterminate, which is independent from its checked state https://css-tricks.com/indeterminate-checkboxes/

booleanA boolean property should be present, or not
truefalse
namename

The name of the checkbox input

typedChoose from a set of typed values
any
scalescale

specify the scale of the checkbox, defaults to m

typedChoose from a set of typed values
lm (default)s
valuevalue

The value of the checkbox input

typedChoose from a set of typed values
any

Events

NameDescriptionDetail
calciteCheckboxChange

Emitted when the checkbox checked status changes

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Styles

NameDescriptionCSS Variable
--calcite-checkbox-size

the width and height of the checkbox

--calcite-checkbox-size

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.