Toggle

Sharp rectangular track + sliding rectangular thumb. Same vocabulary as Checkbox, but feels like a hardware switch.

States

Off

Disabled

Disabled on

Add to your project

One command adds this component to your project.

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

npx shadcn@latest add @aicanvas/andromeda-toggle

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

Prop	Type	Default	Description
checked	`boolean`	-	Controlled checked state; supplying it puts the switch in controlled mode.
defaultChecked	`boolean`	false	Initial checked state when uncontrolled.
onCheckedChange	`(next: boolean) => void`	-	Handler called with the next checked state whenever the switch toggles.
label	`string`	-	Optional text rendered beside the switch and linked to it via htmlFor.
disabled	`boolean`	false	Disables interaction and dims the switch.
className	`string`	-	Extra classes merged onto the visual track.
style	`React.CSSProperties`	-	Inline styles merged onto the wrapper element.
id	`string`	-	Id for the input; falls back to a generated id and links the label.