# Jelly Switch

> A toggle whose knob is made of jelly.

The knob stretches as it travels, squashes when it lands and wobbles before settling. Holding it squeezes it. For settings with personality.

- Family: Originals
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/jelly-switch/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add jelly-switch
```

It installs to `components/galactrex/jelly-switch.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { JellySwitch } from "@/components/galactrex/jelly-switch";

<JellySwitch label="Sound effects" showLabel defaultChecked />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | What it switches. |
| `checked / defaultChecked` | `boolean` | — | Controlled or initial state. |
| `onChange` | `(checked: boolean) => void` | — | Called on toggle. |
| `disabled` | `boolean` | — | Disables it. |
| `showLabel` | `boolean` | `false` | Show the label beside it. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Setting.** With a visible label in a list.
- **Bare.** Label for assistive tech only.

## Accessibility

- role=switch with aria-checked; Space and Enter toggle it.

## Motion

- Spring travel plus squash-and-stretch keyframes on the knob.
- Reduced motion: it slides without the wobble.