Skip to content zachleat Project

🚾Web Component Star Search

A searchable catalog of standalone web components.

<vaadin-checkbox>

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

Category
Forms
Built with
Lit
Library
Vaadin
Author
Vaadin
Package
@vaadin/checkbox
Component size
12.2 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size
19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular
4 out of 5
Downloads
291,148/week · jsDelivr 3,673 hits/month (whole @vaadin/checkbox package)
Latest stable version
25.3.2
Last published
Component last changed
(in 25.3.0)
License
Apache-2.0

<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.
has-tooltip Set when the checkbox has a slotted tooltip.

The following custom CSS properties are available for styling:

Custom CSS property
--vaadin-checkbox-background
--vaadin-checkbox-border-color
--vaadin-checkbox-border-radius
--vaadin-checkbox-border-width
--vaadin-checkbox-gap
--vaadin-checkbox-label-color
--vaadin-checkbox-label-font-size
--vaadin-checkbox-label-font-weight
--vaadin-checkbox-label-line-height
--vaadin-checkbox-marker-color
--vaadin-checkbox-marker-size
--vaadin-checkbox-size
--vaadin-input-field-error-color
--vaadin-input-field-error-font-size
--vaadin-input-field-error-font-weight
--vaadin-input-field-error-line-height
--vaadin-input-field-helper-color
--vaadin-input-field-helper-font-size
--vaadin-input-field-helper-font-weight
--vaadin-input-field-helper-line-height
--vaadin-input-field-required-indicator
--vaadin-input-field-required-indicator-color

See Styling Components documentation.

Attributes

Events