Checkbox

Radix UIBase UI
Edit on GitHub
Primitive / Atomstable

Checkbox

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

@glinui/uiComponent: checkbox

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add checkbox

Usage

Basic

TSX
1import { Checkbox } from "@glinui/ui"
2

3export function Demo() {
4  return (
5    <label className="flex items-center gap-2 text-sm">
6      <Checkbox />
7      Accept terms and conditions
8    </label>
9  )
10}

Disabled

TSX
1import { Checkbox } from "@glinui/ui"
2

3export function Demo() {
4  return (
5    <label className="flex items-center gap-2 text-sm opacity-50">
6      <Checkbox disabled />
7      Disabled option
8    </label>
9  )
10}

Variants + Sizes

TSX
1import { Checkbox } from "@glinui/ui"
2

3export function Demo() {
4  return (
5    <div className="space-y-3">
6      <div className="flex items-center gap-3">
7        <Checkbox variant="default" defaultChecked aria-label="Default" />
8        <Checkbox variant="glass" defaultChecked aria-label="Glass" />
9        <Checkbox variant="liquid" defaultChecked aria-label="Liquid" />
10        <Checkbox variant="matte" defaultChecked aria-label="Matte" />
11        <Checkbox variant="outline" defaultChecked aria-label="Outline" />
12      </div>
13      <div className="flex items-center gap-3">
14        <Checkbox size="sm" defaultChecked aria-label="Small" />
15        <Checkbox size="md" defaultChecked aria-label="Medium" />
16        <Checkbox size="lg" defaultChecked aria-label="Large" />
17      </div>
18    </div>
19  )
20}

Accessibility

  • Built on Radix Checkbox with full ARIA support.
  • Pair with `<label>` via `htmlFor`.

Keyboard Interactions

KeyAction
SpaceToggle checked state.

ARIA Attributes

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

Reduced Motion

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

Affected properties

transformopacity

API Reference

PropTypeRequiredDefaultDescription
variant"default" | "glass" | "frosted" | "liquid" | "matte" | "outline"NodefaultVisual treatment.
size"sm" | "md" | "lg"NomdControl size.
checkedboolean | 'indeterminate'--Controlled checked state.
defaultCheckedboolean--Initial checked state.
onCheckedChange(checked: boolean | 'indeterminate') => void--Change handler.
disabledboolean-falseDisables 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

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-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

CheckboxProps

CheckboxProps

PropTypeRequiredDefaultDescription
size"sm" | "md" | "lg"No"md"Variant option from checkboxVariants.
variant"default" | "glass" | "frosted" | "liquid" | "matte" | "outline"No"default"Variant option from checkboxVariants.