# Glass switch (goodtabs UI)

A labelled switch on a glass pill, built on the radix switch with role switch.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/glass-switch.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/glass-switch`

## Usage

```tsx
import { GlassSwitch } from "@/components/ui/glass-switch"

<GlassSwitch label="Reduce motion" defaultChecked />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | Visible label, wired to the switch with htmlFor. |
| ...props | `ComponentProps<typeof Switch>` |  | Everything the shadcn switch takes: checked, onCheckedChange, disabled, name. |

## When to use

- Settings floating over an image or a visual page

## When not to use

- Settings pages on plain backgrounds: use switch-field

## Notes for agents

- Keeps role=switch, Space to toggle and the form value from radix
- The label is inside the pill and clicking it toggles
- Glass needs something behind it: it bends and frosts what sits under it, so on a flat background it reads as a grey box
- Track tones are foreground at 15 and 40 percent so on and off read without color

Docs: https://ui.goodtabs.co/components/glass-switch