Toggle
A simple toggle switch component
The Toggle component is a simple switch that can be toggled on or off. It is commonly used to enable or disable a feature or setting.
Use showIcon prop to display an icon inside the toggle switch.
Usage
javascript
1import Toggle from "@/components/atoms/Toggle";
2
3export default function Example() {
4 const [isToggled, setIsToggled] = useState(false);
5
6 return (
7 <Toggle
8 checked={isToggled}
9 onChange={() => setIsToggled(!isToggled)}
10 />
11 );
12}
Props
The Toggle component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | "" | The label to display next to the toggle switch. |
| labelPosition | "left" | "right" | "left" | The position of the label relative to the toggle switch. |
| color | string | "primary" | Color used for the toggle switch (see tailwind.config). |
| inactiveColor | string | "gray" | Inactive color used for the toggle switch (see tailwind.config). |
| variant | "solid" | "soft" | "solid" | The variant of the toggle switch. |
| borderRadius | string | "full" | Tailwind border-radius class (e.g. "none", "sm", "md", etc.). |
| showIcon | boolean | false | If true, an icon will be displayed inside the toggle switch. |
| disabled | boolean | false | If true, the toggle switch will be disabled. |
| checked | boolean | false | If true, the toggle switch will be in the "on" position. |
| onChange | function | - | Callback function called when the toggle switch is toggled. |
| className | string | "" | Additional Tailwind classes for the container. |
| ...props | object | - | Any other valid <input> attributes (e.g. name, id, etc.). |
The onChange prop is required to handle the toggle switch change event.