Switcher
A component for toggling between options
The Switcher component is for for toggling between multiple options. It supports both horizontal and vertical layouts,
customizable sizes, colors, shapes, and optional tooltips.
Usage
javascript
1import { useState } from "react"; 2import Switch from "@/components/atoms/Switch"; 3 4const [selected, setSelected] = useState("option1"); 5 6<Switch 7 options={[ 8 { value: "option1", name: "Option 1" }, 9 { value: "option2", name: "Option 2" }, 10 { value: "option3", name: "Option 3" } 11 ]} 12 selected={selected} 13 onChange={setSelected} 14/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | array | - | An array of options, [{ value: string, name: string, tooltip?: string, Icon?: ReactNode, image?: string }]. |
| selected | string | - | The currently selected value. |
| onChange | function | - | Callback function that is called when the selected value changes. |
| color | string | "gray" | The base color (use tailwind.config). |
| size | "sm" | "md" | "lg" | "md" | The size of the switch. |
| borderRadius | string | "md" | The border radius of the switch (uses Tailwind border radius to shape component). |
| vertical | boolean | false | If true, the switch will be displayed vertically. |
| animate | boolean | true | If true, the switch will animate with a sliding indicator. |
| hover | boolean | true | If true, the switch will have a hover effect. |
| border | boolean | false | If true, the switch will have a border. |
| buttonBorder | boolean | false | If true, the switch will have a border on the buttons. |
| buttonShadow | boolean | true | If true, the switch will have a shadow on the buttons. |
| tooltipPosition | "top" | "right" | "bottom" | "left" | "top" | The position of the tooltip (if tooltip is provided). |
| className | string | "" | Additional Tailwind classes for the container. |
| buttonClassName | string | "" | Additional Tailwind classes for the buttons. |
| ...props | object | - | Any other valid <div> attributes (e.g. role, aria-*, etc.). |
Use options to customize the switch with icons, images, and tooltips.