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=.

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
variant	Switch variant	default icon	default
disabled	Disables interactions with the toggle.	Boolean	false
onCheckedChange	onCheckedChange is called when the toggled	function	(value)=> void

Property

Description

Type

Default

variant

Switch variant

default

icon

default

disabled

Disables interactions with the toggle.

Boolean

false

onCheckedChange

onCheckedChange is called when the toggled

function

(value)=> void

Reference#

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

Edit this page Table