Switch - Aspect UI

Docs

Components

Switch

Switch - Aspect UI

The Switch component toggles between two states such as on/off. It’s a user-friendly alternative to checkboxes, often used in settings or preferences.

Table of Contents#

Switch Props

Switch Props#

Prop	Type	Default	Description
checked	boolean	-	Whether the switch is currently on (true) or off (false).
onChange	(checked: boolean) => void	-	Callback function triggered when the switch state changes.
disabled	boolean	false	Disables the switch when set to true.
label	string	-	Optional label text displayed next to the switch.
size	small medium large	'medium'	Determines the size of the switch.
className	string	''	Additional CSS class for the root container.
switchClassName	string	''	Custom CSS class applied to the switch element.
activeClassName	string	''	CSS class applied to the active (checked) state container.
deactiveClassName	string	''	CSS class applied to the inactive (unchecked) state container.
activeSwitchClassName	string	''	CSS class applied to the switch knob when active.
deactiveSwitchClassName	string	''	CSS class applied to the switch knob when inactive.
labelClassName	string	''	CSS class applied to the label element.
switchIconEnabled	boolean	true	If true, shows the active and inactive switch icons.
activeSwitchIcon	React.ReactNode	-	Icon displayed inside the switch knob when active.
deactiveSwitchIcon	React.ReactNode	-	Icon displayed inside the switch knob when inactive.