Controls

Switch

Storybook

With the Switch component, you'll be able to give users the option to enable or disable features and settings with ease. The Switch is a visually appealing and interactive element that allows users to switch between two states, the on state and the off state. With this component, you will be able to improve the usability and accessibility of your web or mobile application, giving users full control over their preferences and settings.

Imports

The first alternative is recommended since they can reduce the application bundle

1import Switch from 'dd360-ds/Switch'

1import { Switch } from 'dd360-ds'

Usage

Use the Switch component as shown below:

The code snippet below shows how to use the Switch component:

1import  Switch from 'dd360-ds/Switch'
2
3<Switch />
4

Text

With the prop text you can add text next to the switch

1import  Switch from 'dd360-ds/Switch'
2
3<Switch text="Active option" />
4

CustomIcon

With the prop customIcon you can add icon on switch disabled

1import  Switch from 'dd360-ds/Switch'
2
3<Switch customIcon={<DynamicHeroIcon icon="XIcon" className="text-blue-700 w-5" />} />
4

API Reference