## Jelly Switch (S—008)

A toggle whose knob squashes on press, springs across the track and wobbles to rest.

- URL: https://sundaeui.dev/components/jelly-switch
- Category: Forms & inputs · Art direction: Playful
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/jelly-switch.json`
- Tags: form, animated, switch, toggle, react, colorful

Press and hold: the knob widens toward where it is about to go, as a finger would push it. Let go and it springs across the track with a little overshoot, then wobbles. It squashes, stretches and settles in about half a second.
Under the motion it is a plain, accessible switch: a native button with role="switch" and aria-checked, a real <label>, optional description text, and a hidden input so it posts with a form.
Good for settings screens and onboarding preferences in consumer products, anywhere a toggle can afford some personality.

### Usage

```tsx
import { JellySwitch } from '@/components/sundae/jelly-switch'

<JellySwitch
  label="Weekly digest"
  description="One calm email every Sunday."
  defaultChecked
  onCheckedChange={(on) => savePreference('digest', on)}
  color="#ff7a45"
/>
```

### Props

- `label` (`string`, required): Visible label, which is also the accessible name.
- `description` (`string`): Secondary text linked with aria-describedby.
- `checked` (`boolean`): Controlled state.
- `defaultChecked` (`boolean`, default `false`): Initial state for uncontrolled use.
- `onCheckedChange` (`(checked: boolean) => void`): Called on toggle.
- `color` (`string`): Track colour when on.
- `hideLabel` (`boolean`): Hide the label visually. It is applied as aria-label instead.
- `name` (`string`): Adds a hidden input ("on" or "off") for native form posts.
- `disabled` (`boolean`): Disables interaction.

### Accessibility

- A native <button role="switch"> with aria-checked. Space and Enter toggle it.
- The label is a real <label for>, so clicking the text toggles the switch too.
- With reduced motion, the wobble is removed and travel is instant.