Checkbox — Componentes

Comparación entre la versión Astro (Saastro) y React (shadcn/ui)

🚀 saastro/ui (Astro)

Accept terms and conditions

⚛️ shadcn/ui (React)

Installation

pnpm dlx saastro add checkbox

Development (local registry):

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add checkbox --yes

Usage

---
import { Checkbox } from "@/components/ui-saastro/checkbox"
import { Label } from "@/components/ui-saastro/label"
---

<div class="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>

Examples

Default

<Checkbox />

With Label

<div class="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms</Label>
</div>

Checked by Default

<Checkbox checked />

Disabled

<Checkbox disabled />

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked
`disabled`	`boolean`	`false`	Whether the checkbox is disabled
`class`	`string`	-	Additional CSS classes

Accessibility

Uses native <input type="checkbox"> for built-in accessibility
Associate with <Label> using matching id and for attributes
Supports keyboard navigation (Space to toggle)
Properly conveys checked state to screen readers