Checkbox

Checkbox with animated tick stroke reveal, spring bounce, rounded variants, and indeterminate state.

forms v0.1.0

Playground

Examples

Basic

<cg-stack gap="sm"><cg-checkbox label="Default"></cg-checkbox><cg-checkbox label="Checked" checked></cg-checkbox><cg-checkbox label="Disabled" disabled></cg-checkbox></cg-stack>

Round

<cg-stack gap="sm"><cg-checkbox rounded="full" label="Round unchecked"></cg-checkbox><cg-checkbox rounded="full" label="Round checked" checked></cg-checkbox></cg-stack>

Indeterminate

<cg-checkbox label="Select all" indeterminate></cg-checkbox>

States

<cg-stack gap="sm"><cg-checkbox label="Error" error checked></cg-checkbox><cg-checkbox label="Success" success checked></cg-checkbox><cg-checkbox label="Loading" loading></cg-checkbox></cg-stack>

With description

<cg-stack gap="sm"><cg-checkbox label="Accept terms" description="Required to create your account"></cg-checkbox><cg-checkbox label="Marketing emails" description="Receive weekly product updates" checked></cg-checkbox></cg-stack>

Import

import { CgCheckbox } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-checkbox';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`label`	string	""	Label text
`description`	string	""	Helper description below the label
`name`	string	""	Form field name
`value`	string	""	Form value when checked
`checked`	boolean	false	Checked state
`indeterminate`	boolean	false	Indeterminate state (horizontal dash)
`disabled`	boolean	false	Disabled state
`error`	boolean	false	Error state
`success`	boolean	false	Success state
`loading`	boolean	false	Loading state
`rounded`	"none" \| "sm" \| "md" \| "lg" \| "full"	"sm"	Border radius — use "full" for circular checkbox

Events

Event	Detail	Description
`cg-change`	{checked: boolean, value: string}	When toggled