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.

Table of Contents#

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.

labelLabel or content displayed alongside the toggle.ReactNodeNone
withIconIndicates if an icon should be included with the toggle.Booleanfalse
disabledDisables interactions with the toggle.Booleanfalse
sizeDetermines the size variant of the toggle.
bgColorSets the background color variant of the toggle.
onChangeonChange is called when the toggle enabledfunction()=> void
circleStyleCustom class to style the switch circle.stringNone
labelStyleCustom class to style the switch label.stringNone


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