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.

import { Switch } from "rizzui";

Default

The default style of Switch component.

import { Switch } from "rizzui";

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

Variants

You can change the style of Switch using variant property.

Flat

Outline

import { Switch } from "rizzui";

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

Sizes

You can set diffrient sizes of the Switch component using size property.

Small

Default

Large

Extra Large

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

Rounded

You can change the border radius of Switch using rounded property.

Default

None

Small

Medium

Large

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

Label Placement

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

Left Placement

Right Placement

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

With Custom Icons

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

Change theme

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

Disabled

The disabled style of the Switch component.

Disabled

import { Switch } from "rizzui";

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

With Helper Text

You can add helperText to the Switch using helperText property.

Remember me

Please turn on the switch

import { Switch } from "rizzui";

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

With Error Message

You can show the validation error message using error property.

Remember me

This field is required

import { Switch } from "rizzui";

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

API Reference

---

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.

Props	Type	Description	Default
label	ReactNode	Set field label	__
labelWeight	LabelWeight	Set label font weight	"medium"
labelPlacement	left right	Change label direction	"right"
variant	SwitchVariants	The variants of the component are:	"flat"
size	SwitchSizes	The size of the component.	"md"
rounded	SwitchRounded	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 ...	__

Switch Variants

type SwitchVariants = "outline" | "flat";

Label Weight

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

Switch Sizes

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

Switch Rounded

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