Switch Component

A switch component for toggling between on and off states.

Example

Basic Usage

<tap-switch></tap-switch>

Checked State

<tap-switch checked></tap-switch>

Disabled State

<tap-switch disabled></tap-switch>

Properties

Name	Type	Default	Description
checked	boolean	undefined	Whether the switch is in the checked (on) state.
disabled	boolean	undefined	Whether the switch is disabled and non-interactive.
value	string	undefined	The value associated with the switch when it is checked.

CSS Parts

Name	Description
switch	The container that wraps the switch component.
input	The input element that represents the switch's toggle functionality.
slider	The slider element that visually represents the switch's state.

Check this link to learn how to use CSS parts for Switch Component.

CSS Properties

Token	Default	Description
--tap-switch-background-color	--tap-sys-color-surface-tertiary	The background color of the switch.
--tap-switch-checked-background-color	--tap-sys-color-surface-inverse-primary	The background color of the checked switch.
--tap-switch-disabled-background-color	var(--tap-sys-color-surface-disabled)	The background color of the disabled switch.