Signature / Moleculestable

Glass Toggle

Toggle switch with liquid fill animation and frosted glass surface.

@glinui/uiComponent: glass-toggle

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add glass-toggle

Usage$

GlassToggle is a "use client" component. It works in both controlled (checked) and uncontrolled (defaultChecked) modes.

Basic$

TSX

1"use client"
2import { GlassToggle } from "@glinui/ui"
3
4export function GlassToggleDemo() {
5return (
6  <div className="flex items-center justify-center gap-6 p-8">
7    <GlassToggle size="sm" />
8    <GlassToggle />
9    <GlassToggle size="lg" />
10  </div>
11)
12}

Examples$

Custom Color$

TSX

1"use client"
2import { GlassToggle } from "@glinui/ui"
3
4export function GlassToggleColorDemo() {
5return (
6  <div className="flex items-center justify-center gap-6 p-8">
7    <GlassToggle defaultChecked activeColor="#22c55e" />
8    <GlassToggle defaultChecked activeColor="#6366f1" />
9    <GlassToggle defaultChecked activeColor="#f43f5e" />
10  </div>
11)
12}

Accessibility$

Renders with role="switch" and aria-checked.
Supports keyboard activation via default button behavior.
Disabled state removes pointer events and reduces opacity.

Reduced Motion$

When prefers-reduced-motion: reduce is active, transition durations are removed for instant state changes.

API Reference$

Prop	Type	Required	Default	Description
`activeColor`	`string`	No	`-`	Color when checked
`checked`	`boolean`	No	`-`	Controlled checked state
`defaultChecked`	`boolean`	No	`false`	Default checked state
`onCheckedChange`	`(checked: boolean) => void`	No	`-`	Callback when toggle state changes
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Size variant

Source$

TSX

1import { GlassToggle } from "@glinui/ui"

packages/ui/src/components/glass-toggle.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/glass-toggle.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

GlassToggleProps

`GlassToggleProps`

Prop	Type	Required	Default	Description
`activeColor`	`string`	No	`-`	Color when checked
`checked`	`boolean`	No	`-`	Controlled checked state
`defaultChecked`	`boolean`	No	`false`	Default checked state
`onCheckedChange`	`(checked: boolean) => void`	No	`-`	Callback when toggle state changes
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Size variant