Switch

Also known as

Lightswitch, Toggle, Toggle switch
Available since
@salt-ds/core@1.10.0

Switch is a binary control used to switch between two different states. When interacted with, the thumb of the switch travels along the track to indicate state. You can use a switch to control settings, preferences, or actions within an application or system.

  • To present an instantaneous, binary choice between two options that doesn’t require the user to submit or confirm the action. The corresponding action takes effect immediately.
  • To control a critical action that may require confirmation from the user before applying it. This delay is usually intentional, ensuring that users don't accidentally make unwanted changes.
  • To present a list of independent options where the user can select any number of choices. Instead, use Checkbox.
  • To make a single selection between mutually exclusive choices between two or more options. Instead, use RadioButton.
  • To toggle between two (or more) opposing yet mutually exclusive states or options with visual priority. Instead, use ToggleButton.
  • To present multiple options in a group within a compact UI, or if they’re subject to change depending on context. Instead, use selectable Pill.
  • Clarify the option that the switch controls in the text inline to the switch.
  • Text should always sit to the right of the switch.
  • Keep the text description as clear and concise as possible, and ensure it accurately describes the action the switch will perform upon interaction.

To import Switch from the core Salt package, use:

NameTypeDescriptionDefault