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

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.