Skip to main content

Switch

A switch is a toggle that switches between two states.

Switch Example

Basic Example

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>
);
}

Custom Styles

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.

Custom Color

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>
);
}

Advanced

Example below shows how to customize the switch's thumb color, label, and apply classNames to both active and inactive states.

Advanced

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>
);
}

Component API

PropDefaultDescription
name-String

The name of the switch. This will be used to generate the label and the id.

descriptionString

The description of the switch.

labelString

The label of the switch. This will replace label generated from the name.

classNameString

The className of the switch.

activeClassNameString

The className of the switch when it's active.

inactiveClassNameString

The className of the switch when it's inactive.

labelClassNameString

The className of the label.

toggleClassNameString

The className of the toggle.

toggleActiveClassNameString

The className of the toggle when it's active.

toggleInactiveClassNameString

The className of the toggle when it's inactive.