Switch

The Switch component provides a toggle mechanism for users, often used in forms and settings to switch between two states, such as on/off or true/false. It offers customizable styles such as color, size, and radius.

Usage

Basic Switch

A basic toggle switch.

<Switch radius={'full'} />

With Color Accent

A switch with a custom accent color.

<Switch color="red" radius={'full'} />

Large Size

A switch with a larger visual size.

<Switch size="xlarge" radius={'full'} />

Sharp Corners

A switch with a custom border radius.

<Switch radius="small" />

Combination

You can combine different props to get a customized switch. Here's an example with a large, rounded, red-accented switch.

<Switch size="large" color="crimson" radius="small" />

Event Handling

Handle changes using the onChange event.

<Switch onChange={(e) => alert(e.target.checked ? 'Switched On' : 'Switched Off')} />

API

Props

SwitchProps

Prop	Type	Default	Required
onChange	(event: ChangeEvent<HTMLInputElement>) => void	-	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-