Checkbox is an extension to standard checkbox element with theming.
import { Checkbox } from 'primereact/checkbox';<Checkbox.Group>
<Checkbox />
</Checkbox.Group>import { Checkbox } from 'primereact/checkbox';
const BasicDemo = () => {
return (
<div className="card flex items-center justify-center">
<div className="flex items-center gap-2">
<Checkbox inputId="basic-checkbox" />
<label htmlFor="basic-checkbox">
I accept the <a className="font-semibold">Terms of Service</a>
</label>
</div>
</div>
);
};
export default BasicDemo;Use the Checkbox.Group component with value and onValueChange props to control the selected state of checkboxes.
'use client';
import type { CheckboxGroupValueChangeEvent } from '@primereact/types/shared/checkbox';
import { Checkbox } from 'primereact/checkbox';
import React from 'react';
export default function GroupDemo() {
const [value, setValue] = React.useState<string[]>();
return (
<div className="card flex items-center justify-center">
<Checkbox.Group defaultValue={['Cheese']} value={value} onValueChange={(e: CheckboxGroupValueChangeEvent) => setValue(e.value as string[])} className="gap-4 flex-wrap">
<div className="flex items-center gap-2">
<Checkbox inputId="cheese" value="Cheese" />
<label htmlFor="cheese">Cheese</label>
</div>
<div className="flex items-center gap-2">
<Checkbox inputId="mushroom" value="Mushroom" />
<label htmlFor="mushroom">Mushroom</label>
</div>
<div className="flex items-center gap-2">
<Checkbox inputId="pepper" value="Pepper" />
<label htmlFor="pepper">Pepper</label>
</div>
<div className="flex items-center gap-2">
<Checkbox inputId="onion" value="Onion" />
<label htmlFor="onion">Onion</label>
</div>
</Checkbox.Group>
</div>
);
}Checkboxes can be generated using a list of values.
'use client';
import type { CheckboxGroupValueChangeEvent } from '@primereact/types/shared/checkbox';
import { Checkbox } from 'primereact/checkbox';
import React from 'react';
export default function DynamicDemo() {
const [value, setValue] = React.useState<string[]>([]);
const categories = [
{ name: 'Accounting', key: 'A' },
{ name: 'Marketing', key: 'M' },
{ name: 'Production', key: 'P' },
{ name: 'Research', key: 'R' }
];
return (
<div className="card flex items-center justify-center">
<Checkbox.Group value={value} onValueChange={(e: CheckboxGroupValueChangeEvent) => setValue(e.value as string[])} className="flex-col gap-4">
{categories.map((category) => (
<div key={category.key} className="flex items-center gap-2">
<Checkbox inputId={category.key} value={category.key} />
<label htmlFor={category.key}>{category.name}</label>
</div>
))}
</Checkbox.Group>
</div>
);
}Checkboxes can be displayed in a card format.
'use client';
import type { CheckboxGroupValueChangeEvent } from '@primereact/types/shared/checkbox';
import { Checkbox } from 'primereact/checkbox';
import React from 'react';
const interests = [
{
id: 'tech',
title: '💻 Technology',
description: 'Latest updates in software, gadgets, and innovation.'
},
{
id: 'design',
title: '🎨 Design',
description: 'UI/UX trends, graphic design tips, and creativity.'
},
{
id: 'finance',
title: '💰 Finance',
description: 'Investing, saving, and crypto news.'
}
];
export default function CardDemo() {
const [value, setValue] = React.useState<string[]>([]);
return (
<div className="card flex items-center justify-center">
<div className="max-w-3xl ">
<div className=" font-semibold leading-none">Select your interests</div>
<Checkbox.Group value={value} onValueChange={(e: CheckboxGroupValueChangeEvent) => setValue(e.value as string[])} className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
{interests.map((interest) => (
<label
key={interest.id}
className={`flex-1 flex items-start gap-4 p-4 rounded-md border border-surface-200 dark:border-surface-800 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors cursor-pointer ${value.includes(interest.id) ? '!border-primary' : ''}`}
>
<Checkbox key={interest.id} value={interest.id} />
<div className="flex-1 flex flex-col gap-2">
<div className="text-lg font-semibold leading-none">{interest.title}</div>
<div className="text-sm text-surface-500">{interest.description}</div>
</div>
</label>
))}
</Checkbox.Group>
</div>
</div>
);
}Use the indeterminate property to display an indeterminate state.
'use client';
import type { CheckboxChangeEvent, CheckboxGroupValueChangeEvent } from '@primereact/types/shared/checkbox';
import { Checkbox } from 'primereact/checkbox';
import React from 'react';
const categories = [
{ name: 'Product updates', key: 'product-updates' },
{ name: 'Weekly newsletter', key: 'weekly-newsletter' },
{ name: 'Security alerts', key: 'security-alerts' }
];
export default function IndeterminateDemo() {
const [value, setValue] = React.useState<string[]>([]);
const isAllSelected = categories.every((category) => value.includes(category.key));
const indeterminate = categories.some((category) => value.includes(category.key)) && !isAllSelected;
return (
<div className="card flex items-center justify-center">
<div className="flex flex-col gap-4">
<div className="flex items-center gap-2">
<Checkbox inputId="indeterminate-checkbox" indeterminate={indeterminate} checked={isAllSelected} onCheckedChange={(e: CheckboxChangeEvent) => setValue(e.checked ? categories.map((category) => category.key) : [])} />
<label htmlFor="indeterminate-checkbox">Email Notifications</label>
</div>
<Checkbox.Group value={value} onValueChange={(e: CheckboxGroupValueChangeEvent) => setValue(e.value as string[])} className="flex-col gap-4 pl-7">
{categories.map((item) => (
<div key={item.key} className="flex items-center gap-2">
<Checkbox inputId={item.key} value={item.key} />
<label htmlFor={item.key}>{item.name}</label>
</div>
))}
</Checkbox.Group>
</div>
</div>
);
}Use the size property to change the size of a checkbox.
import { Checkbox } from 'primereact/checkbox';
export default function SizesDemo() {
return (
<div className="card flex flex-wrap items-center justify-center gap-4">
<div className="flex items-center gap-2">
<Checkbox inputId="small" size="small" />
<label htmlFor="small" className="text-sm">
Small
</label>
</div>
<div className="flex items-center gap-2">
<Checkbox inputId="normal" size="normal" />
<label htmlFor="normal">Normal</label>
</div>
<div className="flex items-center gap-2">
<Checkbox inputId="large" size="large" />
<label htmlFor="large" className="text-lg">
Large
</label>
</div>
</div>
);
}Specify the filled property to display the component with a higher visual emphasis than the default outlined style.
import { Checkbox } from 'primereact/checkbox';
export default function FilledDemo() {
return (
<div className="card flex items-center justify-center">
<div className="flex items-center gap-2">
<Checkbox inputId="filled" variant="filled" />
<label htmlFor="filled">Filled</label>
</div>
</div>
);
}Use the disabled property to disable a checkbox.
import { Checkbox } from 'primereact/checkbox';
export default function DisabledDemo() {
return (
<div className="card flex items-center justify-center gap-4">
<Checkbox inputId="disabled" disabled />
<Checkbox inputId="disabled" disabled checked />
</div>
);
}Specify the invalid property to display the component with a red border.
import { Checkbox } from 'primereact/checkbox';
export default function InvalidDemo() {
return (
<div className="card flex items-center justify-center">
<div className="flex items-center gap-2">
<Checkbox inputId="invalid" invalid />
<label htmlFor="invalid" className="text-red-500 dark:text-red-400">
Invalid
</label>
</div>
</div>
);
}