`<vaadin-switch>`

`<vaadin-switch>` is a binary on/off switch control for a single setting.

Category: Forms
Built with: Lit
Library: Vaadin
Author: Vaadin
Package: @vaadin/switch
Component size: 12.9 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: 2 out of 5
Downloads: 12,279/week (whole @vaadin/switch package)
Latest stable version: 25.3.2
Last published: Oct 2, 2026
Component last changed: Sep 22, 2026 (in 25.3.0)
License: Apache-2.0

<vaadin-switch> is a binary on/off switch control for a single setting.

<vaadin-switch label="Notifications"></vaadin-switch>

The following shadow DOM parts are available for styling:

Part name	Description
`switch`	The track element that holds the marker.
`marker`	The marker element inside the track.
`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 switch is activated with mouse, touch or the keyboard.
`checked`	Set when the switch is checked.
`disabled`	Set when the switch is disabled.
`readonly`	Set when the switch is readonly.
`focus-ring`	Set when the switch is focused using the keyboard.
`focused`	Set when the switch is focused.
`required`	Set when the switch is required.
`invalid`	Set when the switch is invalid.
`has-label`	Set when the switch has a label.
`has-helper`	Set when the switch has helper text.
`has-error-message`	Set when the switch has an error message.
`has-tooltip`	Set when the switch has a slotted tooltip.

The following custom CSS properties are available for styling:

Custom CSS property
`--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`
`--vaadin-switch-background`
`--vaadin-switch-border-color`
`--vaadin-switch-border-radius`
`--vaadin-switch-border-width`
`--vaadin-switch-gap`
`--vaadin-switch-height`
`--vaadin-switch-width`
`--vaadin-switch-icon-color`
`--vaadin-switch-icon-size`
`--vaadin-switch-label-color`
`--vaadin-switch-label-font-size`
`--vaadin-switch-label-font-weight`
`--vaadin-switch-label-line-height`
`--vaadin-switch-marker-border-color`
`--vaadin-switch-marker-border-radius`
`--vaadin-switch-marker-border-width`
`--vaadin-switch-marker-color`
`--vaadin-switch-marker-height`
`--vaadin-switch-marker-scale`
`--vaadin-switch-marker-width`

See Styling Components documentation.

Attributes