---
sidebar_position: 4
---

import { Switch } from "rizzui";
import Paper from "@site/src/components/paper";
import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";

# Switch

A basic widget for getting the user input. It's a wonderfull interface for toggle a value betweeen two states. You can use **Switch**
as an alternative of **Checkbox** component.

```tsx
import { Switch } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Switch** component.

<Paper className="text-gray-950">
  <Switch />
</Paper>

```tsx
import { Switch } from "rizzui";

export default function App() {
  return <Switch />;
}
```

<div className="mb-16" />

## Variants

You can change the style of **Switch** using [**variant**](#switch-variants) property.

<Paper className="flex-row justify-around gap-4 flex-wrap">
  <Switch
    variant="flat"
    label="Flat"
  />
  <Switch
    variant="outline"
    label="Outline"
  />
</Paper>

```tsx
import { Switch } from "rizzui";

export default function App() {
  return (
    <>
      <Switch
        variant="flat"
        label="Flat"
      />
      <Switch
        variant="outline"
        label="Outline"
      />
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can set diffrient sizes of the **Switch** component using [**size**](#switch-sizes) property.

<Paper className="flex-row justify-around gap-4 flex-wrap">
  <Switch
    label="Small"
    size="sm"
  />
  <Switch label="Default" />
  <Switch
    size="lg"
    label="Large"
  />
  <Switch
    size="xl"
    label="Extra Large"
  />
</Paper>

```tsx
import { Switch } from "rizzui";

export default function App() {
  return (
    <>
      <Switch
        label="Small"
        size="sm"
      />
      <Switch label="Default" />
      <Switch
        size="lg"
        label="Large"
      />
      <Switch
        size="xl"
        label="Extra Large"
      />
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of **Switch** using [**rounded**](#switch-rounded) property.

<Paper className="flex-row justify-around gap-4 flex-wrap">
  <Switch label="Default" />
  <Switch
    label="None"
    rounded="none"
  />
  <Switch
    label="Small"
    rounded="sm"
  />
  <Switch
    label="Medium"
    rounded="md"
  />
  <Switch
    label="Large"
    rounded="lg"
  />
</Paper>

```tsx
import { Switch } from "rizzui";

export default function App() {
  return (
    <>
      <Switch label="Default" />
      <Switch
        label="None"
        rounded="none"
      />
      <Switch
        label="Small"
        rounded="sm"
      />
      <Switch
        label="Medium"
        rounded="md"
      />
      <Switch
        label="Large"
        rounded="lg"
      />
    </>
  );
}
```

<div className="mb-16" />

## Label Placement

You can set label on the two diffrient side using **labelPlacement** property.

<Paper className="sm:flex-row justify-around gap-2 flex-col">
  <Switch
    label="Left Placement"
    variant="outline"
    labelPlacement="left"
  />
  <Switch
    label="Right Placement"
    variant="outline"
    labelPlacement="right"
  />
</Paper>

```tsx
import { Switch } from "rizzui";

export default function App() {
  return (
    <>
      <Switch
        label="Left Placement"
        variant="outline"
        labelPlacement="left"
      />
      <Switch
        label="Right Placement"
        variant="outline"
        labelPlacement="right"
      />
    </>
  );
}
```

<div className="mb-16" />

## With Custom Icons

You can set custom on, off icon of the **Switch** component using **onIcon** & **offIcon** property.

<Paper>
  <Switch
    label="Change theme"
    offIcon={<SunIcon className="h-3.5 w-3.5" />}
    onIcon={<MoonIcon className="h-3 w-3" />}
    variant="outline"
  />
</Paper>

```tsx
import { Switch } from "rizzui";
import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Switch
      label="Change theme"
      offIcon={<SunIcon className="h-3.5 w-3.5" />}
      onIcon={<MoonIcon className="h-3 w-3" />}
      variant="outline"
    />
  );
}
```

<div className="mb-16" />

## Disabled

The disabled style of the **Switch** component.

<Paper>
  <Switch
    label="Disabled"
    disabled
  />
</Paper>

```tsx
import { Switch } from "rizzui";

export default function App() {
  return (
    <Switch
      label="Disabled"
      disabled
    />
  );
}
```

<div className="mb-16" />

## With Helper Text

You can add helperText to the **Switch** using **helperText** property.

<Paper className="justify-start items-start">
  <Switch
    variant="outline"
    label="Remember me"
    labelClassName="font-medium"
    helperText="Please turn on the switch"
  />
</Paper>

```tsx
import { Switch } from "rizzui";

export default function App() {
  return (
    <Switch
      variant="outline"
      label="Remember me"
      labelClassName="font-medium"
      helperText="Please turn on the switch"
    />
  );
}
```

<div className="mb-16" />

## With Error Message

You can show the validation error message using **error** property.

<Paper className="justify-start items-start">
  <Switch
    label="Remember me"
    labelClassName="font-medium"
    error="This field is required"
  />
</Paper>

```tsx
import { Switch } from "rizzui";

export default function App() {
  return (
    <Switch
      label="Remember me"
      labelClassName="font-medium"
      error="This field is required"
    />
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Switch Props

Here is the API documentation of the Switch component. And the rest of the props are the same as the original html checkbox input field.

<div className="overflow-x-auto">

|        Props        |                Type                |                              Description                               |  Default   |
| :-----------------: | :--------------------------------: | :--------------------------------------------------------------------: | :--------: |
|        label        |            `ReactNode`             |                            Set field label                             |    \_\_    |
|     labelWeight     |    [LabelWeight](#label-weight)    |                         Set label font weight                          | `"medium"` |
|   labelPlacement    |           `left` `right`           |                         Change label direction                         | `"right"`  |
|       variant       | [SwitchVariants](#switch-variants) |                   The variants of the component are:                   |  `"flat"`  |
|        size         |    [SwitchSizes](#switch-sizes)    |                       The size of the component.                       |   `"md"`   |
|       rounded       |  [SwitchRounded](#switch-rounded)  |                       The rounded variants are:                        |  `"pill"`  |
|      disabled       |             `boolean`              |                     Whether the switch is disabled                     |  `false`   |
|       onIcon        |            `ReactNode`             |                 Set custom icon when the switch is on                  |    \_\_    |
|       offIcon       |            `ReactNode`             |                 Set custom icon when the switch is off                 |    \_\_    |
|     helperText      |            `ReactNode`             |        Add helper text. It could be string or a React component        |    \_\_    |
|        error        |              `string`              |                   Show error message using this prop                   |    \_\_    |
|   labelClassName    |              `string`              |                  Override default CSS style of label                   |    \_\_    |
|   switchClassName   |              `string`              |                  Override default CSS style of switch                  |    \_\_    |
| switchKnobClassName |              `string`              |               Override default CSS style of switch knob                |    \_\_    |
|   helperClassName   |              `string`              |                Override default CSS style of helperText                |    \_\_    |
|   errorClassName    |              `string`              |              Override default CSS style of error message               |    \_\_    |
|      className      |              `string`              |            Add custom classes to the root of the component             |    \_\_    |
|         ref         |      `Ref<HTMLInputElement>`       |                                                                        |    \_\_    |
|         ...         |       `InputHTMLAttributes`        | native props like **value**, **onChange**, **onFocus**, **onBlur** ... |    \_\_    |

</div>

<div className="mb-10" />

### Switch Variants

```ts
type SwitchVariants = "outline" | "flat";
```

<div className="mb-10" />

### Label Weight

```ts
type LabelWeight = "normal" | "medium" | "semibold" | "bold";
```

<div className="mb-10" />

### Switch Sizes

```ts
type SwitchSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Switch Rounded

```ts
type SwitchRounded = "sm" | "md" | "lg" | "none" | "pill";
```
