Proximus design systemDev
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

See deprecated code
expiry date: 31/12/2023

A switch button toggles between two states, typically "on" and "off," allowing users to activate or deactivate a feature.

last modified: 16/02/2022 10:40:04

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.

  1. Default state ("off" state)
  2. Hover/Focus state
  3. Active state ("on" state)
  4. Disabled state

Anatomy

  1. Label
    A label may accompany a switch to further clarify on the action the switch will perform.
  2. Thumb
    The thumb indicator the switch state, it have 2 possible positions: at the left or the right in the container.
  3. State indicator
    The state indicator confirm the state of the switch, it's a very short label like "on/off" or "yes/no".
  4. 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: 11/02/2022 16:30:04

Sizes and colors

last modified: 22/11/2023 12:35:11

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-neg as parent to rs-switch .

Lorem ipsum

Disabled switch

Accessibility

The disabled switch <input> should simply have disabled attribute.

Lorem ipsum

Disabled negative switch

Lorem ipsum

Deprecated

EXPIRY DATE: 31/12/2023

The negative versions of the switch below should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class:

  • rs-switch-neg
last modified: 28/02/2024 15:40:06

Configuration metadata

Selector: ds-switch

Class: DSSwitchComponent

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