Checkbox
Checkbox lets users select options individually or in a group.
Source
LLM docs
Package
Examples
6
Properties
59
Playground
Basics
Controlled checkbox example with a helper message that reacts to user selection.
Loading demo…
import { useState } from 'react';
import { Block, Checkbox } from '@plocks/ui';
export function Demo() {
const [checked, setChecked] = useState(false);
return (
<Block w={600}>
<Checkbox
label="Accept terms and conditions"
description={checked ? 'Thanks! You can proceed to the next step.' : 'Check the box to continue.'}
checked={checked}
onChange={setChecked}
/>
</Block>
);
}Sizes
Choose a
size token (xs through 3xl) to scale the checkbox.Loading demo…
import { Block, Checkbox, Row, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Row align="center" gap="lg" wrap="wrap">
{SIZES.map((size) => (
<Block key={size} align="center">
<Checkbox accessibilityLabel={`Checkbox ${size}`} size={size} defaultChecked />
<Text variant="small">{size}</Text>
</Block>
))}
</Row>
);
}Colors
Pass a semantic
color token (primary, secondary, success, warning, error) to match the checkbox accent to the message intent.Loading demo…
import { Block, Checkbox } from '@plocks/ui';
const COLORS = ['primary', 'secondary', 'success', 'warning', 'error'] as const;
export function Demo() {
return (
<Block>
{COLORS.map((color) => (
<Checkbox key={color} color={color} label={color} defaultChecked />
))}
</Block>
);
}States
Highlight enabled, disabled, required, and error states to cover validation scenarios.
Loading demo…
import { Block, Checkbox } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Checkbox label="Enabled" defaultChecked />
<Checkbox label="Disabled" disabled />
<Checkbox label="Required" required defaultChecked />
<Checkbox label="With error" error="Selection required" />
</Block>
);
}Indeterminate
Demonstrates a parent checkbox that toggles a group and reflects partial selection with
indeterminate.Loading demo…
import { useState } from 'react';
import { Block, Checkbox } from '@plocks/ui';
const ITEMS = [
{ id: 1, label: 'Email notifications' },
{ id: 2, label: 'SMS alerts' },
{ id: 3, label: 'Push notifications' },
];
export function Demo() {
const [selected, setSelected] = useState<number[]>([1]);
const allIds = ITEMS.map((item) => item.id);
const allChecked = selected.length === ITEMS.length;
const someChecked = selected.length > 0 && !allChecked;
const toggleAll = () => {
setSelected((current) => (current.length === ITEMS.length ? [] : allIds));
};
const toggleItem = (id: number) => {
setSelected((current) =>
current.includes(id) ? current.filter((itemId) => itemId !== id) : [...current, id]
);
};
return (
<Block>
<Checkbox
label="Select all"
checked={allChecked}
indeterminate={someChecked}
onChange={toggleAll}
/>
<Block pl="md">
{ITEMS.map(({ id, label }) => (
<Checkbox
key={id}
label={label}
checked={selected.includes(id)}
onChange={() => toggleItem(id)}
/>
))}
</Block>
</Block>
);
}Descriptions
Use
description for supporting copy under the label, and pair it with error to surface validation details.Loading demo…
import { Block, Checkbox } from '@plocks/ui';
export function Demo() {
return (
<Block style={{ maxWidth: 400 }}>
<Checkbox
label="Receive product updates"
description="Get occasional emails about new features and improvements."
/>
<Checkbox
label="Accept terms of service"
description="Required before creating an account."
error="Please accept to continue."
required
/>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources