Proximus design system
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.

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