Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Switch

Switch is used to quickly select between two possible settings. They are commonly used for "on/off" setting.

last modified: 22/02/2022 10:05:05

Overview

Switches toggle the state of a single setting on or off. Switches are only used for these binary actions that occur immediately after the user "flips the switch".

Are you building a form with several components?

Forms can be simple or complex, so we have prepared clear recommendations for you to use. These guidelines will help you build your forms and maintain consistency between all the forms of our digital platforms.
Discover our recommandations to build a form.

States

A switch is successfully toggled when the switch thumb slides to the other side of the container upon user interaction.

Default state ("off" state)
Hover/Focus state
Active state ("on" state)
Disabled state

Anatomy

Label
A label may accompany a switch to further clarify on the action the switch will perform.
Thumb
The thumb indicator the switch state, it have 2 possible positions: at the left or the right in the container.
State indicator
The state indicator confirm the state of the switch, it's a very short label like "on/off" or "yes/no".
Container
A container is displayed around the thumb and the state indicator with a solid color. The color is set depending of the switch's state.

last modified: 22/02/2022 10:05:05

Sizes and colors

last modified: 17/03/2022 12:00:04

Default switch

Accessibility

The switch <input> should always have :

role="switch" ;
id="button_id" and name="button_id" .

The switch <label> should always have :

aria-labelledby="ac-switch-text" who refered to a text who label the switch.

Lorem ipsum

Default negative switch

Negative class

To have negative version add rs-switch-neg

Lorem ipsum

Disabled switch

Accessibility

The switch <input> should always have :

aria-disabled="true" attribute;
disabled attribute.

Lorem ipsum

Disabled negative switch

Lorem ipsum

last modified: 16/11/2022 18:25:04

Configuration metadata

Selector: lib-switch

Class: SwitchComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name	Type	Default	Required	Description
id	string	undefined	Yes	Defines unique id of the component
ariaLabel	string	null	No	Sets the accessibility text
onLabel	string	On	No	SDefines label when component is in active(ON) status
offLabel	string	Off	No	SDefines label when component is in active(OFF) status
negative	boolean	false	No	Defines light/dark style of the component
disabled	any	true	No	Defines if the control is disabled

Outputs

Name	Type	Description
forwardOnInputClicked	EventEmitter<string>	Emits the selected input when user clicks the selectable box

Models

        export interface ISelectableBoxesOptions {
            isRadioButtonInput?: boolean;
            negativeStyle?: boolean;
            pickxStyle?: boolean;
            lockedState?: boolean;
            patch?: boolean;
            recommendedBanner?: boolean;
            gridding?: boolean;
            classSize?: string;
        }