CheckboxGroup

Checkbox is an extension to standard checkbox element with theming.

Cheese

Mushroom

Pepper

Onion

basic-demo

Usage#

import { CheckboxGroup } from '@primereact/ui/checkboxgroup';

<Checkbox.Group></Checkbox.Group>

Examples#

Dynamic#

Checkboxes can be generated using a list of values.

Accounting

Marketing

Production

Research

dynamic-demo

'use client';
import type { CheckboxGroupChangeEvent } from '@primereact/types/shared/checkboxgroup';
import { Checkbox } from '@primereact/ui/checkbox';
import { CheckboxGroup } from '@primereact/ui/checkboxgroup';
import { Label } from '@primereact/ui/label';
import React from 'react';
import { Check } from '@primeicons/react/check';

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="flex items-center justify-center">
            <CheckboxGroup value={value} onValueChange={(e: CheckboxGroupChangeEvent) => setValue(e.value as string[])} className="flex-col gap-4">
                {categories.map((category) => (
                    <div key={category.key} className="flex items-center gap-2">
                        <Checkbox.Root inputId={category.key} value={category.key}>
                            <Checkbox.Box>
                                <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                            </Checkbox.Box>
                        </Checkbox.Root>
                        <Label htmlFor={category.key}>{category.name}</Label>
                    </div>
                ))}
            </CheckboxGroup>
        </div>
    );
}

Card#

Checkboxes can be displayed in a card format.

Select your interests:

💻 Technology

Latest updates in software, gadgets, and innovation.

🎨 Design

UI/UX trends, graphic design tips, and creativity.

💰 Finance

Investing, saving, and crypto news.

card-demo

'use client';
import type { CheckboxGroupChangeEvent } from '@primereact/types/shared/checkboxgroup';
import { Checkbox } from '@primereact/ui/checkbox';
import { CheckboxGroup } from '@primereact/ui/checkboxgroup';
import { Label } from '@primereact/ui/label';
import React from 'react';
import { Check } from '@primeicons/react/check';

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="max-w-3xl mx-auto">
            <h5 className="font-medium">Select your interests:</h5>
            <CheckboxGroup
                value={value}
                onValueChange={(e: CheckboxGroupChangeEvent) => 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 select-none flex items-start gap-3 p-4 rounded-md border  hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors cursor-pointer ${value.includes(interest.id) ? 'border-primary' : 'border-surface'}`}
                    >
                        <Checkbox.Root key={interest.id} value={interest.id}>
                            <Checkbox.Box>
                                <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                            </Checkbox.Box>
                        </Checkbox.Root>
                        <div className="flex-1 flex flex-col gap-2">
                            <h6 className="font-medium leading-none">{interest.title}</h6>
                            <p className="text-sm text-surface-500">{interest.description}</p>
                        </div>
                    </Label>
                ))}
            </CheckboxGroup>
        </div>
    );
}

Indeterminate#

Use the indeterminate property to display an indeterminate state.

Email Notifications

Product updates

Weekly newsletter

Security alerts

indeterminate-demo

'use client';
import type { CheckboxRootChangeEvent } from '@primereact/types/shared/checkbox';
import type { CheckboxGroupChangeEvent } from '@primereact/types/shared/checkboxgroup';
import { Checkbox } from '@primereact/ui/checkbox';
import { CheckboxGroup } from '@primereact/ui/checkboxgroup';
import { Label } from '@primereact/ui/label';
import React from 'react';
import { Check } from '@primeicons/react/check';
import { Minus } from '@primeicons/react/minus';

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="flex items-center justify-center">
            <div className="flex flex-col gap-4">
                <div className="flex items-center gap-2">
                    <Checkbox.Root
                        inputId="indeterminate-checkbox"
                        indeterminate={indeterminate}
                        checked={isAllSelected}
                        onCheckedChange={(e: CheckboxRootChangeEvent) => setValue(e.checked ? categories.map((category) => category.key) : [])}
                    >
                        <Checkbox.Box>
                            <Checkbox.Indicator className="data-checked:block! hidden!" as={Check} />
                            <Checkbox.Indicator className="data-indeterminate:data-unchecked:block! hidden!" as={Minus} />
                        </Checkbox.Box>
                    </Checkbox.Root>
                    <Label htmlFor="indeterminate-checkbox">Email Notifications</Label>
                </div>
                <CheckboxGroup
                    value={value}
                    onValueChange={(e: CheckboxGroupChangeEvent) => 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.Root inputId={item.key} value={item.key}>
                                <Checkbox.Box>
                                    <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                                </Checkbox.Box>
                            </Checkbox.Root>
                            <Label htmlFor={item.key}>{item.name}</Label>
                        </div>
                    ))}
                </CheckboxGroup>
            </div>
        </div>
    );
}