Preview

Usage

<cs-checkbox>Accept terms</cs-checkbox>
<cs-checkbox checked>Notifications enabled</cs-checkbox>
<cs-checkbox indeterminate>Select all</cs-checkbox>
<cs-checkbox disabled>Disabled</cs-checkbox>

Properties

aria-controlsstring default: null

Adds aria-controls attribute to the component. If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.

aria-labelstring default: null

Adds an aria-label to the native control.

Use this if you don't have a visible label for this control.

aria-requiredboolean default: null

Specifies whether to add aria-required to the native control.

checkedbooleanrequired

Specifies if the component is selected.

control-idstring

Specifies the ID of the native form element. By default, it uses an automatically generated ID.

disabledboolean

Specifies if the control is disabled, which prevents the user from modifying the value and prevents the value from being included in a form submission. A disabled control can't receive focus.

indeterminateboolean default: false

Specifies that the component is in an indeterminate state. The behavior of this property replicates the behavior of the respective property in the native control.

namestring

Specifies the name of the control used in HTML forms.

read-onlyboolean default: false

Specifies if the control is read-only, which prevents the user from modifying the value. Should be used only inside forms. A read-only control is still focusable. If both readOnly and disabled are set, disabled takes precedence.

Slots

default

The control's label that's displayed next to the checkbox. A state change occurs when a user clicks on it.

description

Description that appears below the label.

Events

blurCustomEvent<void>

Called when input focus is removed from the UI control.

changeCustomEvent<CheckboxProps.ChangeDetail>

Called when the user changes the component state. The event detail contains the current value for the checked property.

focusCustomEvent<void>

Called when input focus is moved to the UI control.