Primitive / Atom

Checkbox

Radix checkbox with glass, liquid, matte, and outline surface variants.

pnpm dlx @glinui/cli@latest add checkbox

Installation

Install from

pnpm dlx @glinui/cli@latest add checkbox

Prefer the package?

Usage

Variants and sizes

import { Checkbox } from "@glinui/ui"


export function Demo() {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-3">
        <Checkbox variant="glinr" defaultChecked aria-label="glinr" />
        <Checkbox variant="solid" defaultChecked aria-label="solid" />
        <Checkbox variant="plain" defaultChecked aria-label="plain" />
        <Checkbox variant="soft" defaultChecked aria-label="soft" />
        <Checkbox variant="outline" defaultChecked aria-label="outline" />
        <Checkbox variant="ghost" defaultChecked aria-label="ghost" />
      </div>
      <div className="flex items-center gap-3">
        <Checkbox size="sm" defaultChecked aria-label="Small" />
        <Checkbox size="md" defaultChecked aria-label="Medium" />
        <Checkbox size="lg" defaultChecked aria-label="Large" />
        <Checkbox defaultChecked="indeterminate" aria-label="Indeterminate" />
        <Checkbox aria-invalid aria-label="Invalid" />
      </div>
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { Checkbox } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex items-center gap-3">
      <Checkbox variant="glass" defaultChecked aria-label="Glass checked" />
      <Checkbox variant="glass" aria-label="Glass" />
    </div>
  )
}

Checked by Default

import { Checkbox } from "@glinui/ui"

export function CheckboxDefaultCheckedDemo() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="checked" defaultChecked />
      <label htmlFor="checked" className="text-sm">Subscribed to newsletter</label>
    </div>
  )
}

Surface Variants

import { Checkbox } from "@glinui/ui"

export function CheckboxVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Checkbox variant="default" defaultChecked aria-label="Default" />
      <Checkbox variant="glass" defaultChecked aria-label="Glass" />
      <Checkbox variant="liquid" defaultChecked aria-label="Liquid" />
      <Checkbox variant="matte" defaultChecked aria-label="Matte" />
      <Checkbox variant="outline" defaultChecked aria-label="Outline" />
    </div>
  )
}

With Form Label

import { Checkbox } from "@glinui/ui"

export function CheckboxFormLabelDemo() {
  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <Checkbox id="terms" required name="terms" />
        <label htmlFor="terms" className="text-sm">I agree to the terms of service</label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="privacy" name="privacy" />
        <label htmlFor="privacy" className="text-sm">I agree to the privacy policy</label>
      </div>
    </div>
  )
}

Accessibility

Built on Radix Checkbox with full ARIA support.
Pair with `<label>` via `htmlFor`.
Built on `@radix-ui/react-checkbox`, which renders a fully accessible checkbox with keyboard support.
Always pair with a `<label>` via `htmlFor` / `id` or wrap both in a `<label>` element.
The `required` prop sets `aria-required` on the underlying button element.
Space toggles the checkbox; Enter is not handled by default (browser behavior).

Keyboard Interactions

Key	Action
`Space`	Toggle checked state.

ARIA Attributes

`role="checkbox"`
`aria-checked`
`aria-required`

Reduced Motion

Check icon transitions respect `prefers-reduced-motion`.

The check indicator uses a brief scale/fade transition that is suppressed when `prefers-reduced-motion: reduce` is active.

Affected properties

transformopacity

API Reference

Prop	Type	Required	Default	Description
`variant`	`ControlVariantProp`	No	`ambient (glinr)`	Surface look. Omit to follow the ambient design style: glinr is an inset well with a raised accent check, plain is the flat shadcn box. Glass is opt-in.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Control size.
`checked`	`boolean \| 'indeterminate'`	-	`-`	Controlled checked state.
`defaultChecked`	`boolean`	-	`-`	Initial checked state.
`onCheckedChange`	`(checked: boolean \| 'indeterminate') => void`	-	`-`	Change handler.
`disabled`	`boolean`	-	`false`	Disables interaction.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Checkbox } from "@glinui/ui"

Source Files

checkbox.tsx

checkbox.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

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

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

CheckboxProps

`CheckboxProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`-`	-
`variant`	`ControlVariantProp`	No	`-`	Surface look. Omit to follow the ambient design style (glinr = inset well with a raised accent check). Also: solid, plain, soft, outline, ghost, glass (opt-in), liquid, matte, frosted.