Switch - Keep React

The Toggle Switch component provides a user-friendly way to enable or disable a setting or feature. It presents a visual representation of two states, typically on and off, allowing users to easily toggle between them. The Toggle Switch component is highly versatile and can be integrated into various user interfaces to enhance user interactions and control options.

Default switch#

The "Default Switch" component provides a visual representation of two states, typically "on" and "off," allowing users to effortlessly toggle between them.

Switch With Icon#

Enhance the visual appeal of the switch by adding icons. Simply enable the withIcon prop with withIcon=.

Switch With Background#

Elevate the design by choosing between two background color variants: bgColor="primary" and bgColor="slate".

Sizes of Switch#

Adapt the switch size to suit your design with three size variants: sm, md, and lg. Simply set the size prop to "sm", "md", or "lg".

Disabled Switch#

Disable the switch component by utilizing the disabled prop with disabled={true}.

API Reference#

Refer to the API documentation for detailed information about the Toggle Switch component.

Property	Description	Type	Default
label	Label or content displayed alongside the toggle.	ReactNode	None
withIcon	Indicates if an icon should be included with the toggle.	Boolean	false
disabled	Disables interactions with the toggle.	Boolean	false
size	Determines the size variant of the toggle.	sm md lg	md
bgColor	Sets the background color variant of the toggle.	primary slate	primary
onChange	onChange is called when the toggle enabled	function	()=> void
circleStyle	Custom class to style the switch circle.	string	None
labelStyle	Custom class to style the switch label.	string	None

Reference#

Our switch component is built using the @headlessui/react package. For more information , follow the documentation @headlessui/react.