Documentation

Documentation versions (currently viewingVaadin 24)

Checkbox

Styling API reference for the Checkbox component.

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…​} selector. See Lumo Style Properties for more information on style properties.

Note
Input Field Components Shared Styles
Style properties whose names start with --vaadin-input-field are shared among all input field components. To apply them only to a specific type of component, use an element selector like vaadin-text-field {…​}

Checkbox Properties

Feature Property Default Value

Background

--vaadin-checkbox-background

--lumo-contrast-20pct

Background, hover

--vaadin-checkbox-background-hover

--lumo-contrast-30pct

Border radius

--vaadin-checkbox-border-radius

--lumo-border-radius-s

Checkmark character

--vaadin-checkbox-checkmark-char

--lumo-icons-checkmark

Checkmark character, indeterminate

--vaadin-checkbox-checkmark-char-indeterminate

""

Checkmark color

--vaadin-checkbox-checkmark-color

--lumo-primary-contrast-color

Checkmark size

--vaadin-checkbox-checkmark-size

calc(var(--lumo-size-m) / 2) + 2px

Label color

--vaadin-checkbox-label-color

--lumo-body-text-color

Label font size

--vaadin-checkbox-label-font-size

--lumo-font-size-m

Label padding

--vaadin-checkbox-label-padding

--lumo-space-xs

Label

Feature Property Default Value

Color

--vaadin-input-field-label-color

--lumo-secondary-text-color

Focused color

--vaadin-input-field-focused-label-color

--lumo-primary-text-color

Hovered color

--vaadin-input-field-hovered-label-color

--lumo-body-text-color

Font size

--vaadin-input-field-label-font-size

--lumo-font-size-s

Font weight

--vaadin-input-field-label-font-weight

500

Helper

Feature Property Default Value

Font size

--vaadin-input-field-helper-font-size

--lumo-font-size-xs

Font weight

--vaadin-input-field-helper-font-weight

400

Color

--vaadin-input-field-helper-color

--lumo-secondary-text-color

Top margin

--vaadin-input-field-helper-spacing

0.4em

Error Message

Feature Property Default Value

Font size

--vaadin-input-field-error-font-size

--lumo-font-size-xs

Font weight

--vaadin-input-field-error-font-weight

400

Color

--vaadin-input-field-error-color

--lumo-error-text-color

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Checkbox

Root element

vaadin-checkbox

Focused

vaadin-checkbox[focused]

Keyboard focused

vaadin-checkbox[focus-ring]

Disabled

vaadin-checkbox[disabled]

Hovered

vaadin-checkbox:hover

Pressed

vaadin-checkbox[active]

Checked

vaadin-checkbox[checked]

Indeterminate

vaadin-checkbox[indeterminate]

Checkbox box

vaadin-checkbox::part(checkbox)

Checkmark

vaadin-checkbox::part(checkbox)::after

Label

vaadin-checkbox > label

Checkbox Group

Root element

vaadin-checkbox-group

States

Focused

vaadin-checkbox-group[focused]

Keyboard focused

vaadin-checkbox-group[focus-ring]

Disabled

vaadin-checkbox-group[disabled]

Hovered

vaadin-checkbox-group:hover

One or more checkboxes checked

vaadin-checkbox-group[has-value]

Parts

Checkbox wrapper

vaadin-checkbox-group::part(group-field)

Checkboxes

vaadin-checkbox-group > vaadin-checkbox

Label

Checkbox group with label

vaadin-checkbox-group[has-label]

Label

vaadin-checkbox-group::part(label)

Label text

vaadin-checkbox-group > label

Required indicator

vaadin-checkbox-group::part(required-indicator)

Helper and Validation Error

Field with helper

vaadin-checkbox-group[has-helper]

Helper

vaadin-checkbox-group::part(helper-text)

Helper text

vaadin-checkbox-group > [slot="helper"]

Invalid field

vaadin-checkbox-group[invalid]

Error message

vaadin-checkbox-group::part(error-message)

Error message text

vaadin-checkbox-group > [slot="error-message"]