Switch

Switches allow you to instantly change the On/Off states.

  • Anatomy
  • Element Patterns and Types
  • Description
  • States On/Off
  • Behavior

Anatomy

  1. Text Label
  2. Description Text (Optional)
  3. Container
  4. Thumb

Element Patterns and Types

Description True False  
States Enabled Disabled Error
On/Off On Off  

Description

You can select whether to use a description text. Description is not used by default.

States On/Off

A switch may have normal and selected states. The states may be used in duplicates except for the "Disabled" state. The "Hover" and "Pressed" states are not provided in the design library, and the states are automatically applied during development.

General States
Enabled
  • Indicates that the component is available.
Disabled
  • Indicates that the component is not available.
  • Option changes are not available in this state.
Hover
  • A state indicating that the mouse cursor is placed over an element, which is available only in PC and web environments.
  • This state is not available when "Disabled" is selected.
Pressed
  • Provided for the "Mouse Down" or "Touch Down" states.
  • This state is not available when "Disabled" is selected.
Select States
On Indicates that the switch is turned on.
Off Indicates that the switch is turned off.

Behavior

When the switch is turned on or off, it will affect the relevant element instantly.