Switch

1. Anatomy

2. Configurations

2.1 Size

There are 2 sizes: medium and large. Use medium as default.

2.2 Label

Switch always comes with a label. There are on-left or on-right positionings.

2.2 Layout

Switch has 2 layouts: content-fit or layout-fit.

3. States

Switch has 3 states: on, off and focus. Please note that switch has no disabled state.

4. Keyboard experience

5. Screen reader experience

6. Behavior

A user clicks on the switch to change the state to on or off.

7. Resilience and responsiveness

7.1 Minimum width

There is a minimum width of checkboxes of 112px. Once parent container shrinks below the width, the checkbox stops to shrink.

7.2 Text wrapping

Text expand as much as it can within the confines of the parent container and then starts wrapping to the next line.

7.3 Layout fit

The layout-fit sits in a 12-columns grid system. The parent container is divided into 12 columns with a gap of 4px.

Customize the label’s width by setting the number of columns of the label-box.

There is a minimum width of 112px set on the switch and if the parent’s container is not sufficient, the content will overflow.

8. Animation

The thumb transits linearly on switching.

9. Visual specs

9.1 Margin

9.2 Font size

9.3 Switch control size