Checkbox | Glass UI

Email me product updates

Release notes and occasional product updates.

Installation

npx @glass-ui-kit/cli add checkbox

Usage

import { Checkbox, Field, FieldDescription, Label } from "@glass-ui-kit/glass"

export default function App() {
  return (
    <Field className="flex items-start gap-3">
      <Checkbox />
      <div className="space-y-1.5">
        <Label>Accept terms</Label>
        <FieldDescription>We'll only email when it matters.</FieldDescription>
      </div>
    </Field>
  )
}

import { Checkbox, Field, FieldDescription, Label } from "@glass-ui-kit/glass"

export default function App() {
  return (
    <Field className="flex items-start gap-3">
      <Checkbox />
      <div className="space-y-1.5">
        <Label>Accept terms</Label>
        <FieldDescription>We'll only email when it matters.</FieldDescription>
      </div>
    </Field>
  )
}

Examples

Default

A minimal checkbox paired with a native label.

Accept terms

Field Pairing

Use Field, Label, and FieldDescription to keep checkbox controls aligned with the rest of your forms without manually wiring ids.

Enable notifications

We only send messages when something important happens.

Disabled

The native disabled attribute handles interaction and styling state.

Disabled option

Styling

Checkbox is a native <input type="checkbox"> with glass-aware defaults. Use className as an escape hatch for one-off visual tweaks.

/* Native state */
<Checkbox />
<Checkbox defaultChecked />
<Checkbox disabled />

/* Escape hatch */
<Checkbox className="glass bg-black/20" />

API Reference

Prop	Type
`className`	`string`

Checkbox accepts the standard native <input type="checkbox"> props, including checked, defaultChecked, disabled, name, value, and onChange.