Checkbox

A small drop of glass that fills with the accent. The file also has a checkbox group.

Installation#

pnpmnpmyarnbun
$ pnpm dlx shadcn@latest add @liquikit/checkbox

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Checkbox } from "@/components/liquikit/checkbox"
<Checkbox defaultChecked>Remember me</Checkbox>

Examples#

Group#

CheckboxGroup keeps a list of checked values. A parent checkbox checks or clears them all, and shows a dash when only some are checked.

API Reference#

Checkbox

PropTypeDefault
theme"light" | "dark"

Light or dark glass. Falls back to the nearest GlassThemeProvider, then light.

—
lensPartial<LensProfile>

Overrides for the lens profile, such as thickness, bevel, ior and magnification.

—
liquidnumber

How far the glass squashes and stretches as it moves. 0 keeps it rigid.

—
refraction"interactive" | "always"

When the glass bends the page. interactive bends it while the component is pressed, dragged or focused, always bends it all the time.

"interactive"
childrenReactNode

The content.

—

Also takes every prop of Base UI's checkbox, plus className and style.

CheckboxGroup

Takes every prop of Base UI's checkbox group, plus className and style.