Photonix

Checkbox

A control that allows the user to make a binary choice.

Preview

Usage
"use client";

import { Checkbox } from '@photonix/ultimate';

export default function CheckboxPreviewExample() {
    return <Checkbox label="Include archived projects" defaultChecked size="medium" />;
}

Component API

Checkbox

Prop
Type
Default
Description
checked
boolean
-
Whether the checkbox is checked (controlled)
defaultChecked
boolean
false
Initial checked state when uncontrolled
indeterminate
boolean
false
Whether the checkbox is in indeterminate state (for selectAll partial)
size
"small" | "medium"
'medium'
Size of the checkbox
label
React.ReactNode
-
Label text for the checkbox
onChange
((checked: boolean) => void)
-
Callback when checkbox state changes

Variants

Checkbox States

Checkbox source includes checked, indeterminate, disabled, size, and label states.

Checkbox States
"use client";

import { Checkbox, Stack } from '@photonix/ultimate';

export default function CheckboxBasicExample() {
    return (
        <Stack gap="sm">
            <Checkbox label="Include archived projects" defaultChecked size="medium" />
            <Checkbox label="Select visible rows" indeterminate size="medium" />
            <Checkbox label="Locked option" disabled size="small" />
        </Stack>
    );
}

Uncontrolled

Use defaultChecked for uncontrolled behavior.

Uncontrolled
"use client";

import { Checkbox, Flex } from '@photonix/ultimate';

export default function CheckboxUncontrolledExample() {
    return (
        <Flex gap="xl">
            <Checkbox label="Default Checked" defaultChecked />
            <Checkbox label="Default Unchecked" />
        </Flex>
    );
}

Sizes

Checkboxes are available in small and medium (default) sizes.

Sizes
"use client";

import { Checkbox, Flex } from '@photonix/ultimate';

export default function CheckboxSizesExample() {
    return (
        <Flex gap="md" align="center">
            <Checkbox label="Medium (Default)" />
            <Checkbox label="Small" size="small" />
        </Flex>
    );
}

Indeterminate

Used for nested lists where some but not all children are selected.

Indeterminate
"use client";

import { Checkbox } from '@photonix/ultimate';

export default function CheckboxIndeterminateExample() {
    return <Checkbox label="Parent Option" indeterminate checked />;
}

States

Disabled states for both checked and unchecked checkboxes.

States
"use client";

import { Checkbox, Flex } from '@photonix/ultimate';

export default function CheckboxStatesExample() {
    return (
        <Flex gap="xl" wrap="wrap">
            <Checkbox label="Disabled" disabled />
            <Checkbox label="Disabled Checked" disabled defaultChecked />
            <Checkbox label="Disabled Indeterminate" disabled indeterminate />
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Basic Usage
Uncontrolled
Sizes
Indeterminate
States
Photonix UI - React Components, Templates & Figma Design System