Switch
A toggle switch component for enabling or disabling features and settings.
Default
The default switch sits on a raised control surface. Pass labelClassName="pr-2" to balance the padding around the label.
Slim
slim drops the control surface. Use it inside menus, popovers and settings lists.
Small
size="sm" shrinks the track and thumb for dense toolbars.
Large
size="lg" enlarges the track and thumb for roomier layouts.
Slim and small
Combine slim and size="sm" for compact chart controls.
Green
Set color to green to fill the checked track with green.
Loading
isLoading disables the switch, shows a spinner in the thumb, and sets aria-busy.
Properties
The label text displayed next to the switch
The controlled checked state of the switch
The default checked state when used as an uncontrolled component
Event handler called when the checked state changes
Whether the switch is disabled
Default: false
When true, indicates that the user must toggle the switch before the owning form can be submitted
The name of the switch, used when submitting a form
The value of the switch, used when submitting a form
Whether to use the slim variant with reduced padding and no shadow
Default: false
The size of the switch
Default: default
Fill color of the checked track
Default: default
Disables the switch, shows a spinner in the thumb, and sets aria-busy
Default: false
Additional CSS classes to apply to the label
Additional CSS classes. Applied to both the outer label and the switch track.