Checkbox

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

Overview

Checkboxes are designed to be used for "yes" and "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 Segmented Control. The key difference between a Checkbox and Radio is Radios must always have something active, whereas the Checkbox utility is optional.

For "on" and "off" interactions, also consider Switch.

Usage

  • "Yes" and "no" interactions
  • Boolean
  • Workflows where multi-selection is needed
  • Form elements

Sample

2 samples
1
<calcite-checkbox></calcite-checkbox>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
SpaceToggle the component's checked value.
SpaceToggle component's checked value.
TabMoves focus in and out of component.
Tab and ShiftMoves focus in and out of component.

Writing and copy

Keep labels for Checkboxes simple and succinct. Do not use contractions, such as "you're", "aren't", "can't", and "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 concise with Checkbox labels.
Avoid Checkbox writing
Avoid long Checkbox labels, and avoid forming the text as a question.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
checkedcheckedWhen true, the component is checked.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
indeterminateindeterminateWhen true, the component is initially indeterminate, which is independent from its checked value. The state is visual only, and can look different across browsers.booleanfalse
labellabelAccessible name for the component.string
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueThe component's value.any

Styles

NameDescription
--calcite-checkbox-sizeSpecifies the component's height and width.
--calcite-checkbox-border-colorSpecifies the component's color.
--calcite-checkbox-border-color-hoverSpecifies the component's color when hovered.
--calcite-checkbox-icon-colorSpecifies the component's font color.

Events

NameDescriptionBehavior
calciteCheckboxChangeFires when the component's checked status changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close