ComponentsSwitch
Switch
A customizable switch component for toggling between states
The Switch component is a versatile toggle switch that can be used switch between different states.
Tip!
Use shape prop to change the shape of the switch. The available options are rounded-full, rounded-lg, and rounded-none.
Warning!
Ensure that the options prop is an array of objects with name and value properties.
Props
The Switch component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
| options | array | An array of objects with name and value properties. | |
| selected | string | The value of the selected option. | |
| onChange | function | A function that is called when an option is selected. | |
| activeColor | string | gray | The color of the selected option. |
| inactiveColor | string | gray | The color of the unselected options. |
| activeBgColor | string | bg | The background color of the selected option. |
| inactiveBgColor | string | bg | The background color of the unselected options. |
| hover | boolean | false | Whether to apply hover styles to the options. |
| tooltip | boolean | false | Whether to show tooltips on hover. |
| vertical | boolean | false | Whether to display the options vertically. |
| shape | string | rounded-full | The shape of the switch. Possible values: rounded-full, rounded-lg, rounded-none. |
| className | string | Additional CSS classes to be applied to the switch container. |