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 gap-2">
      <Checkbox id="terms" />
      <div className="flex flex-col">
        <Label htmlFor="terms">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 gap-2">
      <Checkbox id="terms" />
      <div className="flex flex-col">
        <Label htmlFor="terms">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.

Enable notifications

We only send messages when something important happens.

Disabled

The native disabled attribute handles interaction and styling state.

Disabled option

Styling & API

Checkbox is a native <input type="checkbox"> with glass-aware defaults. It accepts standard checkbox attributes and class composition only.

<Checkbox />
<Checkbox defaultChecked />
<Checkbox className="glass bg-black/20" />