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

Usage


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

Storybook

Open example in our Storybook

Storybook failed to load. Please connect to the VPN to access.

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