Components
Checkbox & Radio
Glass form controls — a frosted checkbox that fills with an accent and checkmark, and a radio group with a glass dot.
Install
npx shadcn@latest add https://websiteglass.com/r/glass-checkbox.json
npx shadcn@latest add https://websiteglass.com/r/glass-radio.jsonCheckbox
import { GlassCheckbox } from '@/components/ui/glass-checkbox';
<GlassCheckbox checked={on} onCheckedChange={setOn} ariaLabel="Wi-Fi" />| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state. |
defaultChecked | boolean | false | Initial state when uncontrolled. |
onCheckedChange | (v: boolean) => void | — | Fires on change. |
ariaLabel | string | — | Accessible label. |
Radio
import { GlassRadio, GlassRadioGroup } from '@/components/ui/glass-radio';
<GlassRadioGroup value={plan} onValueChange={setPlan}>
<GlassRadio value="free" ariaLabel="Free" />
<GlassRadio value="pro" ariaLabel="Pro" />
</GlassRadioGroup>GlassRadioGroup is controlled via value / onValueChange; each GlassRadio
takes a value. Both controls render proper checkbox / radio roles with
aria-checked.