Skip to main content



This component lets the user select one option from a group of many.

Option 1
Option 2
Option 3

Component Codex


checkedDraws the checkbox in a checked state.booleanfalse
disabledDisables the checkbox.booleanfalse
editMakes this edit and not editable.booleanfalse
indeterminateDraws the checkbox in an indeterminate state.booleanfalse
invalidThis will be true when the control is in an invalid state. Validity is determined by the `required` prop.booleanfalse
nameThe checkbox's name attribute.string
requiredMakes the checkbox a required field.booleanfalse
valueThe checkbox's value attribute.string


scBlurEmitted when the control loses focus.CustomEvent<void>
scChangeEmitted when the control's checked state changes.CustomEvent<void>
scFocusEmitted when the control gains focus.CustomEvent<void>


reportValidity() => Promise<boolean>

Checks for validity and shows the browser's validation message if the control is invalid.

triggerBlur() => Promise<void>

Removes focus from the checkbox.

triggerClick() => Promise<void>

Simulates a click on the checkbox.

triggerFocus(options?: FocusOptions) => Promise<void>

Sets focus on the checkbox.

Shadow Parts

baseThe elements base wrapper.
checked-iconChecked icon.
controlThe control wrapper.
indeterminate-iconIndeterminate icon.
labelThe label.