Switch
<sc-switch></sc-switch>
This component let users create switch.
- Preview
- Code
<sc-switch>Toggle Me</sc-switch>
Disabled
Use the disabled property to disable the switch
- Preview
- Code
<sc-switch disabled>Disabled</sc-switch>
Custom Size
Use the css variable design tokens to change the sizes of the switch for an instance.
- Preview
- Code
<sc-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;"></sc-switch>
Component Codex
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| checked | Draws the switch in a checked state. | boolean | false |
| disabled | Disables the switch. | boolean | false |
| edit | This will be true as a workaround in the block editor to focus on the content. | boolean | false |
| invalid | This will be true when the control is in an invalid state. Validity is determined by the `required` prop. | boolean | false |
| name | The switch's name attribute. | string | |
| required | Makes the switch a required field. | boolean | false |
| reversed | boolean | ||
| value | The switch's value attribute. | string |
Events
| Event | Description | Type |
|---|---|---|
scBlur | Emitted when the control loses focus. | CustomEvent<void> |
scChange | Emitted when the control's checked state changes. | CustomEvent<void> |
scFocus | Emitted when the control gains focus. | CustomEvent<void> |
Methods
reportValidity() => Promise<boolean>
Checks for validity and shows the browser's validation message if the control is invalid.
Shadow Parts
| Part | Description |
|---|---|
base | |
control | |
description | |
thumb | |
title |