Overview
Value: true
A switch toggle is used to select and execute an action instantly, in real time. A switch is toggled successfully when the switch thumb slides to the other side of the track upon click or press.
For selections that require a confirmation to execute and are housed in a form, use KCheckbox component instead.
Usage
Use a switch for the following:
- When an instant response is required without final confirmation
- Actions that do not need a formal review
- Selections that offer an on/off decision
Specifications
-
Thumb ON color:
brand.primary.v_500 -
Track ON color:
brand.primary.v_200 -
Thumb OFF color:
palette.grey.v_100 -
Track OFF color:
palette.grey.v_300
Guidelines
- Align a switch with the container margin
- Align a switch to the right of the text label
- Stack swithes vertically in lists
- Switch text labels Labels should concisely describe the action to be executed
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
ariaLabelledBy | — | string |
null
| — |
value | Current value of the switch state: on or off | boolean | — | true |
label | If provided, show a text label next to the switch | string |
null
| — |
disabled | Whether or not the switch is disabled | boolean |
false
| — |
Events
| Name | Description |
|---|---|
input | Emitted on each change with new value |
focus | — |
blur | — |
Slots
| Name | Description |
|---|---|
default | — |