NAMCHE UI

Checkbox

A binary control, built on Base UI's Checkbox primitive, for toggling a single option on or off.

Install

pnpm dlx shadcn@latest add @namche/checkbox

Usage

import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

<div className="flex items-center gap-2">
  <Checkbox id="deploy-clusters" defaultChecked />
  <Label htmlFor="deploy-clusters">Deploy and scale clusters</Label>
</div>

Uncontrolled state is set with defaultChecked; a controlled checkbox takes checked and onCheckedChange. The indicator is an ink-filled square — the checked state paints --gaia-erebos, matching the Button's primary variant — and it renders nothing when unchecked, so no extra empty-state styling is needed.

On this page