Checkbox

Description #

<vaadin-checkbox> is an input field representing a binary choice.

<vaadin-checkbox label="I accept the terms and conditions"></vaadin-checkbox>

Styling #

The following shadow DOM parts are available for styling:

Part name	Description
checkbox	The element representing a stylable custom checkbox
label	The slotted label element wrapper
helper-text	The slotted helper text element wrapper
error-message	The slotted error message element wrapper
required-indicator	The required state indicator element

The following state attributes are available for styling:

Attribute	Description
active	Set when the checkbox is activated with mouse, touch or the keyboard.
checked	Set when the checkbox is checked.
disabled	Set when the checkbox is disabled.
readonly	Set when the checkbox is readonly.
focus-ring	Set when the checkbox is focused using the keyboard.
focused	Set when the checkbox is focused.
indeterminate	Set when the checkbox is in the indeterminate state.
invalid	Set when the checkbox is invalid.
has-label	Set when the checkbox has a label.
has-helper	Set when the checkbox has helper text.
has-error-message	Set when the checkbox has an error message.

See Styling Components documentation.

Properties #

accessibleName #

Type: string | null | undefined

String used to label the component to screen reader users.

accessibleNameRef #

Type: string | null | undefined

Id of the element used as label of the component to screen reader users.

autofocus #

Type: boolean

Specify that this control should have input focus when the page loads.

checked #

Type: boolean

True if the element is checked.

disabled #

Type: boolean

If true, the user cannot interact with this element.

errorMessage #

Type: string | null | undefined

Error to show when the field is invalid.

helperText #

Type: string | null | undefined

String used for the helper text.

indeterminate #

Type: boolean

True if the checkbox is in the indeterminate state which means it is not possible to say whether it is checked or unchecked. The state is reset once the user switches the checkbox by hand.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes

invalid #

Type: boolean

Set to true when the field is invalid.

label #

Type: string | null | undefined

The label text for the input node. When no light dom defined via [slot=label], this value will be used.

manualValidation #

Type: boolean

Set to true to enable manual validation mode. This mode disables automatic constraint validation, allowing you to control the validation process yourself. You can still trigger constraint validation manually with the validate() method or use checkValidity() to assess the component's validity without affecting the invalid state. In manual validation mode, you can also manipulate the invalid property directly through your application logic without conflicts with the component's internal validation.

name #

Type: string

The name of the checkbox.

readonly #

Type: boolean

When true, the user cannot modify the value of the checkbox. The difference between disabled and readonly is that the read-only checkbox remains focusable, is announced by screen readers and its value can be submitted as part of the form.

required #

Type: boolean

Specifies that the user must fill in a value.

value #

Type: string

The value of the field.

Methods #

checkValidity #

Type: () => boolean

clear #

Type: () => void

Clear the value of the field.

validate #

Type: () => boolean

Validates the field and sets the invalid property based on the result.

The method fires a validated event with the result of the validation.

Events #

change #

Type: CheckboxChangeEvent

Fired when the checkbox is checked or unchecked by the user.

checked-changed #

Type: CheckboxCheckedChangedEvent

Fired when the checked property changes.

indeterminate-changed #

Type: CheckboxIndeterminateChangedEvent

Fired when the indeterminate property changes.

invalid-changed #

Type: CheckboxInvalidChangedEvent

Fired when the invalid property changes.

validated #

Type: CheckboxValidatedEvent

Fired whenever the field is validated.

value-changed #

Type: CustomEvent

Fired when the value property changes.

Types #

CheckboxChangeEvent #

/**
 * Fired when the checkbox is checked or unchecked by the user.
 */
export type CheckboxChangeEvent = Event & {
  target: Checkbox;
};

CheckboxCheckedChangedEvent #

/**
 * Fired when the `checked` property changes.
 */
export type CheckboxCheckedChangedEvent = CustomEvent<{ value: boolean }>;

CheckboxIndeterminateChangedEvent #

/**
 * Fired when the `indeterminate` property changes.
 */
export type CheckboxIndeterminateChangedEvent = CustomEvent<{ value: boolean }>;

CheckboxInvalidChangedEvent #

/**
 * Fired when the `invalid` property changes.
 */
export type CheckboxInvalidChangedEvent = CustomEvent<{ value: boolean }>;

CheckboxValidatedEvent #

/**
 * Fired whenever the checkbox is validated.
 */
export type CheckboxValidatedEvent = CustomEvent<{ valid: boolean }>;