Toggle

Switches a setting that takes effect the moment it flips.

Configurations

Supported configurations for this component.

OffOn

States

Interaction states covered by the API and the style contract.

HoverFocus visibleDisabledOn hoverDisabled on

Configurations

2 examples
Off
sm
md
lg
On
sm
md
lg

States

5 examples
Hover
Rest
Hover
Focus visible
Rest
Focus visible
Disabled
On hover
Rest
On hover
Disabled on

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PropTypeDefaultDescription
checkedboolean-Controlled checked state; supplying it puts the switch in controlled mode.
defaultCheckedbooleanfalseInitial checked state when uncontrolled.
onCheckedChange(next: boolean) => void-Handler called with the next checked state whenever the switch toggles.
labelstring-Optional text rendered beside the switch and linked to it via htmlFor.
size'sm'|'md'|'lg''md'Three rungs, 34x18 / 42x22 / 50x26, scaling the track, thumb travel and label together. Checkbox and Radio carry two rungs.
disabledbooleanfalseDisables interaction and dims the switch.
classNamestring-Extra classes merged onto the visual track.
styleReact.CSSProperties-Inline styles merged onto the wrapper element.
idstring-Id for the input; falls back to a generated id and links the label.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states

Badge

Displays the state a row or cell reports, such as online, queued, or fault.

8 variants