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

value

DescriptionDefines the form value of the component.
Typestring
Default""
Since2.12.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