Switch
A switch is a toggle that switches between two states.
If you want to use the default switch, you'll only need to pass the name
prop.
The label will be generated from the name.
import { Switch } from '@fluid-design/fluid-ui';export default function SwitchExample() { return ( <Form onSubmit={(values) => console.log(values)} initialValues={{ notifications: true, }} > <Switch name='notifications' /> </Form> );}
You can customize the switch's background color, the thumb(toggle) color, and the label. You can also apply classNames to both active and inactive states.
import { Switch } from '@fluid-design/fluid-ui';export default function SwitchExample() { return ( <Form onSubmit={(values) => console.log(values)} initialValues={{ email: true, }} > <Switch name='email' label='Email Notifications' activeClassName='bg-amber-400 dark:bg-amber-600' description='Receive notifications via email' /> </Form> );}
Example below shows how to customize the switch's thumb color, label, and apply classNames to both active and inactive states.
import { Switch } from '@fluid-design/fluid-ui';export default function SwitchExample() { return ( <Form onSubmit={(values) => console.log(values)} initialValues={{ sms: false, }} > <Switch name='sms' label='SMS' activeClassName='bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 [background-size:150%] [background-position:-0.5rem]' inactiveClassName='bg-gradient-to-r from-gray-800 to-gray-300 dark:from-gray-100 dark:to-gray-600 [background-size:150%] [background-position:-0.5rem]' toggleClassName='bg-transparent' toggleInactiveClassName='!ring !ring-white !ring-inset' toggleActiveClassName='!ring-[10px] !ring-white !ring-inset' description='fees are charged by your carrier' /> </Form> );}
Prop | Default | Description |
---|---|---|
name | - | String The name of the switch. This will be used to generate the label and the id. |
description | String The description of the switch. | |
label | String The label of the switch. This will replace label generated from the name. | |
className | String The className of the switch. | |
activeClassName | String The className of the switch when it's active. | |
inactiveClassName | String The className of the switch when it's inactive. | |
labelClassName | String The className of the label. | |
toggleClassName | String The className of the toggle. | |
toggleActiveClassName | String The className of the toggle when it's active. | |
toggleInactiveClassName | String The className of the toggle when it's inactive. |