Baby Baltazar

Checkbox

A control that allows the user to toggle between checked and not checked.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/checkbox.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

States

Form Example

Usage

How to use this component in your code.

{/* States */}
<Checkbox />                          {/* Unchecked */}
<Checkbox defaultChecked />           {/* Checked */}
<Checkbox disabled />                 {/* Disabled */}
<Checkbox disabled defaultChecked />  {/* Disabled + Checked */}

{/* With Label */}
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms</Label>
</div>