Component Library

Switch

A switch allows the user to select an option between two choice, this is an alternative way to do a checkbox.

Basic switch

Enable feature left

Enable feature right

Enable feature top

Enable feature bottom

Switch with labels

This type of switch informs which value is currently put.

Enable feature left

Disabled option

As input or checkbox, a switch can be disabled.

Disabled switch on

Disabled switch off

Required

The require allows the user to know when he needs to accept. This is mainly usefull to indicate that the user need to accept terms and conditions of use of your website.

Required switch

The main difference with just a red/green switch is the label width the red *

Colors

You can change the color of the switch when it is on or off. You can also use the "opposite" color to have a green/red switch depending on the state.

Custom colors

Tooltip

You can add a tooltip to the switch, it will display the state of the switch or a custom text when hovering the switch.

Switch with tooltip

Without label

You can hide the label of the switch with the hideLabel property. An aria-label is automatically added to the switch for accessibility. It is recommended to use the tooltip property to help the user understand what the switch is for.