GooseUI

Checkbox

Previous
Next

A checkbox with smooth SVG path animation when checked. Zero dependencies, pure CSS animation.

Preview

Installation

npm
pnpm
yarn
bun
npx shadcn@latest add @gooseui/checkbox

Usage

import { Checkbox } from "@/components/ui/checkbox"

export function MyComponent() {
  return <Checkbox label="Accept terms" />
}

Variants

<Checkbox variant="default" label="Default" />
<Checkbox variant="destructive" label="Destructive" />
<Checkbox variant="success" label="Success" />

Sizes

<Checkbox size="sm" label="Small" />
<Checkbox size="default" label="Default" />
<Checkbox size="lg" label="Large" />

Without Label

<Checkbox size="sm" />
<Checkbox size="default" />
<Checkbox size="lg" />

Props

PropTypeDefaultDescription
variant"default" | "destructive" | "success""default"Visual style variant
size"sm" | "default" | "lg""default"Size of the checkbox
labelstringundefinedLabel text displayed next to checkbox