Switch

Description #

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

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

Styling #

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.

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.

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 control, which is submitted with the form data.

readonly #

Type: boolean

When true, the user cannot modify the value of the control. The difference between disabled and readonly is that the read-only element 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: SwitchChangeEvent

Fired when the switch is toggled by the user.

checked-changed #

Type: SwitchCheckedChangedEvent

Fired when the checked property changes.

invalid-changed #

Type: SwitchInvalidChangedEvent

Fired when the invalid property changes.

validated #

Type: SwitchValidatedEvent

Fired whenever the field is validated.

Types #

SwitchChangeEvent #

/**
 * Fired when the switch is toggled by the user.
 */
export type SwitchChangeEvent = Event & {
  target: Switch;
};

SwitchCheckedChangedEvent #

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

SwitchInvalidChangedEvent #

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

SwitchValidatedEvent #

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