Toggle

A toggle will let users activate or deactivate a control, like an on/off switch.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Storybook

React guidance

Source

GitHub code

Example

Open in Storybook


                                                        
                                                        
                                                            import { Switch } from '@optimus-web/core';
                                                        
                                                        <Switch
                                                            checked={checked}
                                                            onChange={handleClick}
                                                            onBackgroundIcon={IconName.Done}
                                                            offBackgroundIcon={IconName.Lock}
                                                        />

API

Name	Default	Description
checked	false	Makes the switch checked
onChange	noop	Handles the checked status
disabled?	false	Makes the switch disabled
offBackgroundIcon?		Adds an icon in the right of the switch visible when it's not checked
onBackgroundIcon?		Adds an icon in the left of the switch visible when it's checked