Skip to main content

Switch

<ui5-switch> | Since 0.8.0

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

Basic Sample​

Properties​

design​

DescriptionDefines the component design.
Note: If Graphical type is set, positive and negative icons will replace the textOn and textOff.
Type"Textual" | "Graphical"
Default"Textual"

checked​

DescriptionDefines if the component is checked.
Note: The property can be changed with user interaction, either by cliking the component, or by pressing the Enter or Space key.
Typeboolean
Defaultfalse

disabled​

DescriptionDefines whether the component is disabled.
Note: A disabled component is noninteractive.
Typeboolean
Defaultfalse

textOn​

DescriptionDefines the text, displayed when the component is checked.
Note: We recommend using short texts, up to 3 letters (larger texts would be cut off).
Typestring | undefined
Defaultundefined

textOff​

DescriptionDefines the text, displayed when the component is not checked.
Note: We recommend using short texts, up to 3 letters (larger texts would be cut off).
Typestring | undefined
Defaultundefined

accessibleName​

DescriptionSets the accessible ARIA name of the component.
Note: We recommend that you set an accessibleNameRef pointing to an external label or at least an accessibleName. Providing an accessibleNameRef or an accessibleName is mandatory in the cases when textOn and textOff properties aren't set.
Typestring | undefined
Defaultundefined
Since1.2.0

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Note: We recommend that you set an accessibleNameRef pointing to an external label or at least an accessibleName. Providing an accessibleNameRef or an accessibleName is mandatory in the cases when textOn and textOff properties aren't set.
Typestring | undefined
Defaultundefined
Since1.1.0

tooltip​

DescriptionDefines the tooltip of the component.
Note: If applicable an external label reference should always be the preferred option to provide context to the ui5-switch component over a tooltip.
Typestring | undefined
Defaultundefined
Since1.9.0

required​

DescriptionDefines whether the component is required.
Typeboolean
Defaultfalse
Since1.16.0

name​

DescriptionDetermines the name by which the component will be identified upon submission in an HTML form.
Note: This property is only applicable within the context of an HTML Form element.
Typestring | undefined
Defaultundefined
Since1.16.0

Slots​

No slots available for this component.

Events​

change​

DescriptionFired when the component checked state changes.
TypeCustomEvent
BubblesYes
CancelableYes - via preventDefault()

Methods​

No methods available for this component.

CSS Parts​

NameDescription
sliderUsed to style the track, where the handle is being slid
text-onUsed to style the textOn property text
text-offUsed to style the textOff property text
handleUsed to style the handle of the switch

More Samples​

Design​