import { FormExamples, MDXLayoutNext } from '@/components';

export const meta = {
  templateTitle: 'Switch',
  description: 'Form component | Fluid Design',
  date: '2023-02-01',
  author: 'Oliver Pan',
  tags: [
    'fluid ui',
    'react',
    'framer motion',
    'headless ui',
    'tailwindcss',
    'form',
    'switch',
  ],
};

export default (props) => (
  <MDXLayoutNext meta={meta} components={FormExamples} {...props} />
);

# Switch

A switch is a toggle that switches between two states.

<CodeFrame title='Switch Example'>
  <FormExamples.Switch.Demo />
</CodeFrame>

## 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.

```jsx
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.

<CodeFrame title='Custom Color'>
  <FormExamples.Switch.CustomBG />
</CodeFrame>

```jsx
import { Switch } from '@fluid-design/fluid-ui';

export default function SwitchExample() {
  return (
    <Form
      onSubmit={(values) => console.log(values)}
      initialValues={{
        email: true,
      }}
    >
      <Switch
        name='email'
        // mark
        label='Email Notifications'
        // mark
        activeClassName='bg-amber-400 dark:bg-amber-600'
        // mark
        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.

<CodeFrame title='Advanced'>
  <FormExamples.Switch.Advanced />
</CodeFrame>

```jsx
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` <Table.D> The name of the switch. This will be used to generate the label and the id. </Table.D> |
| `description`             |         | `String` <Table.D> The description of the switch. </Table.D>                                              |
| `label`                   |         | `String` <Table.D> The label of the switch. This will replace label generated from the name. </Table.D>   |
| `className`               |         | `String` <Table.D> The className of the switch. </Table.D>                                                |
| `activeClassName`         |         | `String` <Table.D> The className of the switch when it's active. </Table.D>                               |
| `inactiveClassName`       |         | `String` <Table.D> The className of the switch when it's inactive. </Table.D>                             |
| `labelClassName`          |         | `String` <Table.D> The className of the label. </Table.D>                                                 |
| `toggleClassName`         |         | `String` <Table.D> The className of the toggle. </Table.D>                                                |
| `toggleActiveClassName`   |         | `String` <Table.D> The className of the toggle when it's active. </Table.D>                               |
| `toggleInactiveClassName` |         | `String` <Table.D> The className of the toggle when it's inactive. </Table.D>                             |