Component reference
Checkbox
Select individual records or the whole set.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Checkbox, Separator } from "@pimolu/react";
const rows = ["Design tokens", "Components", "Playground"];
function SelectAllExample() {
const [selected, setSelected] = useState<string[]>([
"Design tokens",
]);
const allChecked = selected.length === rows.length;
const someChecked = selected.length > 0 && !allChecked;
function toggle(name: string, checked: boolean) {
setSelected((current) => checked
? [...current, name]
: current.filter((item) => item !== name));
}
return (
<div className="grid gap-5 min-w-0">
<Checkbox
label="Select all"
checked={allChecked}
indeterminate={someChecked}
onCheckedChange={(checked) => setSelected(checked
? [...rows]
: [])}
/>
<Separator />
<div className="grid gap-5 min-w-0">
{
rows.map((row) => (<Checkbox
key={row}
label={row}
checked={selected.includes(row)}
onCheckedChange={(checked) => toggle(
row,
checked
)}
/>))
}
</div>
</div>
);
}
export function DemoExample() {
return (<SelectAllExample />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
sm, md and lg.
Variants
The color of the checked box.
States
Unchecked, checked, mixed, disabled, required and described.
Usage
Compute the mixed state from the selected records and keep the application dataset authoritative.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluCheckboxProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | undefined | "md" | Size of the checkbox. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "primary" | Semantic color when checked. |
label | string | undefined | — | Visible accessible label. |
description | string | undefined | — | Additional description. |
indeterminate | boolean | undefined | false | Show the mixed state. |
onCheckedChange | ((checked: boolean) => void) | undefined | — | Called with the new checked value. |
onChange | ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | false | Standard React/HTML attribute. |
size"sm" | "md" | "lg" | undefinedDefault: "md"
Size of the checkbox.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "primary"
Semantic color when checked.
labelstring | undefinedNo default extracted.
Visible accessible label.
descriptionstring | undefinedNo default extracted.
Additional description.
indeterminateboolean | undefinedDefault: false
Show the mixed state.
onCheckedChange((checked: boolean) => void) | undefinedNo default extracted.
Called with the new checked value.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedDefault: false
Standard React/HTML attribute.
Accessibility
- Provide visible labels and verify the indeterminate state with a screen reader.