Checkbox

Checkbox is an extension to standard checkbox element with theming.

basic-demo

Usage#

import { Checkbox } from '@primereact/ui/checkbox';

<Checkbox.Group>
    <Checkbox />
</Checkbox.Group>

Examples#

Sizes#

Use the size property to change the size of a checkbox.

Small

Normal

Large

sizes-demo

import { Checkbox } from '@primereact/ui/checkbox';
import { Label } from '@primereact/ui/label';
import { Check } from '@primeicons/react/check';

export default function SizesDemo() {
    return (
        <div className="flex flex-wrap items-center justify-center gap-4">
            <div className="flex items-center gap-2">
                <Checkbox.Root inputId="small" size="small">
                    <Checkbox.Box>
                        <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                    </Checkbox.Box>
                </Checkbox.Root>
                <Label htmlFor="small">Small</Label>
            </div>
            <div className="flex items-center gap-2">
                <Checkbox.Root inputId="normal" size="normal">
                    <Checkbox.Box>
                        <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                    </Checkbox.Box>
                </Checkbox.Root>
                <Label htmlFor="normal">Normal</Label>
            </div>
            <div className="flex items-center gap-2">
                <Checkbox.Root inputId="large" size="large">
                    <Checkbox.Box>
                        <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                    </Checkbox.Box>
                </Checkbox.Root>
                <Label htmlFor="large">Large</Label>
            </div>
        </div>
    );
}

Filled#

Specify the filled property to display the component with a higher visual emphasis than the default outlined style.

Filled

filled-demo

import { Checkbox } from '@primereact/ui/checkbox';
import { Label } from '@primereact/ui/label';
import { Check } from '@primeicons/react/check';

export default function FilledDemo() {
    return (
        <div className="flex items-center justify-center">
            <div className="flex items-center gap-2">
                <Checkbox.Root inputId="filled" variant="filled">
                    <Checkbox.Box>
                        <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                    </Checkbox.Box>
                </Checkbox.Root>
                <Label htmlFor="filled">Filled</Label>
            </div>
        </div>
    );
}

Disabled#

Use the disabled property to disable a checkbox.

disabled-demo

import { Checkbox } from '@primereact/ui/checkbox';
import { Check } from '@primeicons/react/check';

export default function DisabledDemo() {
    return (
        <div className="flex items-center justify-center gap-4">
            <Checkbox.Root inputId="disabled" disabled>
                <Checkbox.Box>
                    <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                </Checkbox.Box>
            </Checkbox.Root>
            <Checkbox.Root inputId="disabled" disabled checked>
                <Checkbox.Box>
                    <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                </Checkbox.Box>
            </Checkbox.Root>
        </div>
    );
}

Invalid#

Specify the invalid property to display the component with a red border.

Invalid

invalid-demo

import { Checkbox } from '@primereact/ui/checkbox';
import { Label } from '@primereact/ui/label';
import { Check } from '@primeicons/react/check';

export default function InvalidDemo() {
    return (
        <div className="flex items-center justify-center">
            <div className="flex items-center gap-2">
                <Checkbox.Root inputId="invalid" invalid>
                    <Checkbox.Box>
                        <Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
                    </Checkbox.Box>
                </Checkbox.Root>
                <Label htmlFor="invalid" className="text-red-500 dark:text-red-400">
                    Invalid
                </Label>
            </div>
        </div>
    );
}

Indeterminate#

Use the indeterminate property to display an indeterminate state.

Email Notifications

indeterminate-demo

import { Checkbox } from '@primereact/ui/checkbox';
import { Label } from '@primereact/ui/label';
import { Check } from '@primeicons/react/check';
import { Minus } from '@primeicons/react/minus';

export default function IndeterminateDemo() {
    return (
        <div className="flex items-center gap-2 justify-center">
            <Checkbox.Root indeterminate>
                <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>
    );
}