Skip to main content

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.

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.

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.

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.

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.

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.

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.

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.

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.

PropsTypeDescriptionDefault
labelReactNodeSet field label__
labelWeightLabelWeightSet label font weight"medium"
labelPlacementleft rightChange label direction"right"
variantSwitchVariantsThe variants of the component are:"flat"
sizeSwitchSizesThe size of the component."md"
roundedSwitchRoundedThe rounded variants are:"pill"
disabledbooleanWhether the switch is disabledfalse
onIconReactNodeSet custom icon when the switch is on__
offIconReactNodeSet custom icon when the switch is off__
helperTextReactNodeAdd helper text. It could be string or a React component__
errorstringShow error message using this prop__
labelClassNamestringOverride default CSS style of label__
switchClassNamestringOverride default CSS style of switch__
switchKnobClassNamestringOverride default CSS style of switch knob__
helperClassNamestringOverride default CSS style of helperText__
errorClassNamestringOverride default CSS style of error message__
classNamestringAdd custom classes to the root of the component__
refRef<HTMLInputElement>__
...InputHTMLAttributesnative 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";