Skip to main content

switch

switch

A switch selection component, which is an inline element by default. It is used to represent two states: on/off, and allows users to toggle between them. The functionality of switch is similar to checkbox, but the interaction effect and intent are different, representing a toggle and a checkbox respectively.

Demo480×30px 
<div>
  <switch ::value="enabled" />
  <span>switch state: {{ enabled ? 'on' : 'off' }}</span>
</div>

export default {
  data: {
    enabled: false
  }
}

Note

The style of the switch component is usually as shown in the example, but it may vary depending on the device. It is particularly important to note that the width of the switch may differ across different devices, so developers should reserve appropriate layout margins.

Properties

value
get • set • listen

Represents the state of the switch. When the value is true, the switch is in the on state; otherwise, it is in the off state. When the value attribute is not specified, the switch component is off by default.

checked
get • set

This is a Quick App compatibility attribute; using value is generally recommended.

change
get • listen

This is a Quick App compatibility attribute; using value is generally recommended.

CSS Behavior

The overall style of the switch component is determined by the system and is not controlled by the developer, much like the stylistic differences between Fluent 2 and Material 3. Glyphix allows customizing the color of the switch in CSS and adjusting its size.

CSS Properties

color

Sets the slider color of the switch component. Unlike general CSS color, the color property of switch does not support inheritance; therefore, you must define it directly on the switch component.

switch slider color480×36px 
<div>
  red color: <switch class="red"/>,
  not inherited: <switch/>
</div>

div {
  color: red; /* Note that switch does not inherit the color property */
}

.red {
  color: red; /* color must be defined on the switch component's style */
}

background-color

Controls the background color of the switch component. See the active pseudo-class documentation for details.

font-size

The size of the switch can be adjusted via the font-size CSS property to coordinate with the inline text size. The following example demonstrates the relationship between font-size and switch size:

font-size and switch size480×100px 
<div>
  <p class="title">
    title text: <switch/> (1.25rem)
  </p>
  <p>
    content text: <switch/> (1rem)
  </p>
</div>

div {
  line-height: 1.8rem;
}

.title {
  color: #415a77; /* Note that switch does not inherit the color property */
  font-size: 1.25rem;
}

Warning

The display size of the switch is not controlled by properties like width and height, but is always determined by font-size. Therefore, do not manually specify size properties such as width to avoid display issues.

CSS Pseudo-classes

active

The active pseudo-class is used to define the style of a switch when it is in the "on" state. As shown in the example below, it is typically configured alongside regular style rules:

switch slider color settings480×36px 
<div>
  color switch: <switch/>
</div>

/* Style for the switch in the "off" state */
switch {
  color: #415a77;
  background-color: #bde0fe;
}

/* Style for the switch in the "on" state */
switch:active {
  color: #fefae0;
  background-color: #ffafcc;
}

This example uses the color and background-color CSS properties to control the color style when the switch toggles. The switch component only responds to these two CSS property configurations when the active pseudo-class is activated.

Tips

Please define the color and background-color properties for both the normal state and the active state; otherwise, there will be no corresponding color transition when the switch toggles.

Glyphix framework