jelly toggle

preview

pinkbluegreenyelloworangered

usage

Provide a label for an accessible switch, then use controlled or default state depending on the form.

import { JellyToggle } from "@/components/jelly/jelly-toggle"

export function NotificationsToggle() {
  return <JellyToggle color="green" label="notifications" defaultChecked />
}

setup notes

Requires React, TypeScript, Tailwind CSS, and the included cn helper. No additional animation setup is required.

props

prop	type	default	purpose
color	"pink" \| "blue" \| "green" \| "yellow" \| "orange" \| "red"	"green"	Sets the active track color.
checked	boolean	-	Controls the switch state.
defaultChecked	boolean	false	Sets its initial uncontrolled state.
onChange	(checked: boolean) => void	-	Receives state changes.
label	string	-	Renders and labels the switch.