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

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
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