ControlsNew
Glass Checkbox
A glass checkbox whose mark draws itself in and out, with an indeterminate state.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-checkboxnpx shadcn@4.14.1 add @glassyui-native/glass-checkboxPreview
Demos ready. Update 0.
This preview runs the React version. In an app, iOS 26 and later draw the React Native version with the system’s own Liquid Glass. See it on a phone.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-checkboxWhat this installs5 files, 2 packages
Direct registry declarations
These values belong to @glassyui/glass-checkbox itself in registry.json.
Package dependencies
@radix-ui/react-checkboxclsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-checkbox.tsx
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
@radix-ui/react-checkboxclsx
Installed files
components/glassyui/glass-checkbox.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
First add the @glassyui-native mapping to components.json as shown in the Expo guide. Then add the component and match its packages to your Expo SDK:
npx shadcn@4.14.1 add @glassyui-native/glass-checkboxnpx expo install --fixUsage
import { GlassCheckbox } from "@/components/glassyui/glass-checkbox";
export function CheckboxDemo() {
return <GlassCheckbox defaultChecked label="Email me updates" description="One a month, at most." />;
}import { useState } from 'react';
import { GlassCheckbox } from '@/components/glassyui/glass-checkbox';
export default function CheckboxExample() {
const [weekly, setWeekly] = useState(true);
return (
<GlassCheckbox
checked={weekly}
description="One email every Monday."
label="Weekly summary"
onCheckedChange={setWeekly}
/>
);
}
Examples
<GlassCheckbox
checked={all ? true : none ? false : "indeterminate"}
label="All channels"
onCheckedChange={(checked) => setChannels(checked === true ? CHANNELS : [])}
/><GlassCheckbox aria-label="Select row" size="sm" />API
The React Native version takes the same props under React Native’s names: onPress for onClick and style for className. The Expo guide lists what else differs.
GlassCheckboxForward-ref Radix checkbox with an optional label and description.
GlassCheckboxPropsRadix checkbox props plus label, description and size.
labelText beside the box. Clicking it toggles the box.
descriptionA muted line under the label, linked with aria-describedby.
sizemd (default) or sm.
checkedtrue, false or "indeterminate". Also defaultChecked and onCheckedChange.
Notes
Motion
The tick is a stroke that draws itself and the fill fades, in both directions, so clearing a box moves as smoothly as ticking it. Reduced motion shows the end state at once.
Accessibility
Space toggles. Without a label, name the box with aria-label. Forced colours use the system highlight.
Accessibility
Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.
Performance
Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.