Switch

v0.8.0
@ui5/webcomponents
<ui5-switch>

Basic Switch

<ui5-switch text-on="On" text-off="Off"></ui5-switch>
<ui5-switch text-on="On" text-off="Off" checked></ui5-switch>
<ui5-switch></ui5-switch>
<ui5-switch checked></ui5-switch>
<ui5-switch text-on="Yes" text-off="No" disabled></ui5-switch>
<ui5-switch text-on="Yes" text-off="No" checked disabled ></ui5-switch>
	

Graphical Switch

<ui5-switch graphical></ui5-switch>
<ui5-switch graphical checked></ui5-switch>
<ui5-switch graphical disabled></ui5-switch>
<ui5-switch graphical checked disabled></ui5-switch>
	

Overview

The ui5-switch component is used for changing between binary states.
The component can display texts, that will be switched, based on the component state, via the textOn and textOff properties, but texts longer than 3 letters will be cutted off.
However, users are able to customize the width of ui5-switch with pure CSS (<ui5-switch style="width: 200px">), and set widths, depending on the texts they would use.
Note: the component would not automatically stretch to fit the whole text width.

Keyboard Handling

The state can be changed by pressing the Space and Enter keys.

ES6 Module Import

import "@ui5/webcomponents/dist/Switch";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
checked
boolean
false
Defines if the ui5-switch is checked.

Note: The property can be changed with user interaction, either by cliking/tapping on the ui5-switch, or by pressing the Enter or Space key.
disabled
boolean
false
Defines whether the ui5-switch is disabled.

Note: A disabled ui5-switch is noninteractive.
graphical
boolean
false
Defines the ui5-switch type.

Note: If graphical type is set, positive and negative icons will replace the textOn and textOff.
textOff
text-off
string
""
Defines the text of the ui5-switch when switched off.

Note: We recommend using short texts, up to 3 letters (larger texts would be cut off).
textOn
text-on
string
""
Defines the text of the ui5-switch when switched on.

Note: We recommend using short texts, up to 3 letters (larger texts would be cut off).

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the ui5-switch checked state changes.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel