Checkbox — Kipui

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

Composition

01Default

Accept terms and conditions

<Field orientation="horizontal"><Checkbox id /> <FieldLabel htmlFor /></Field>

02With description

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

<FieldContent><FieldLabel /><FieldDescription /></FieldContent>

03Clickable card

Enable notifications

You can enable or disable notifications at any time.

<FieldLabel><Field>…<FieldTitle /></Field></FieldLabel>

Appearance

04Size

sm

md

lg

<Checkbox size="sm | md | lg" />

05Variant

primary

success

destructive

info

<Checkbox variant="primary | success | destructive | info" />

06Color

#6d28d9

#0f766e

#b91c1c

#db2777

<Checkbox color="#6d28d9" />

States

08Indeterminate

Select all

Email

SMS

Push

<Checkbox indeterminate />

09Error

I agree to the policy

You must accept before continuing.

<Checkbox aria-invalid /> + <FieldError />

10Disabled

Disabled

Disabled checked

<Field data-disabled><Checkbox disabled /></Field>

11Controlled

Subscribe to updates

checked = true

<Checkbox checked={checked} onCheckedChange={setChecked} />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Checkbox } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

checkbox-example.tsx

import { Checkbox } from "kipui";

<Checkbox
  defaultChecked
  variant="primary"
  onCheckedChange={(checked) => console.log(checked)}
/>

`indeterminate` is what drives a correct select-all header — it is a visual state, not a third value.
`color` takes a raw CSS colour and wins over `variant`.

Playground

Change the props and the snippet underneath updates with them.

Preview

Props

5

sizemd

variantprimary

radiussm

indeterminate

disabled

<Checkbox size="md" variant="primary" radius="sm" />

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
checkedboolean	required	Controlled state. Pair with `onCheckedChange`.
defaultCheckedboolean	false	Uncontrolled seed value.
indeterminateboolean	false	Renders the mixed state and sets `aria-checked="mixed"`.
onCheckedChange(checked: boolean) => void	required	Fires with the next boolean state.
size"sm" \| "md" \| "lg"	"md"	Box size.
variant"default" \| "primary" \| "success" \| "warning" \| "destructive" \| "info"	"default"	Theme-aware colour preset for the checked state.
radius"none" \| "sm" \| "md" \| "full"	"sm"	Corner radius preset of the box.
disabledboolean	false	Blocks interaction and dims the box.
colorstring	required	Raw CSS colour for the checked box. Wins over `variant`.
onChange(e: ChangeEvent<HTMLInputElement>) => void	required	The raw input event, if you need it — `onCheckedChange` is usually what you want.