Checkbox

Picked or not: one item out of a list, or an option that waits for a Save button. A setting that takes effect the moment it flips is a Switch.

import { Checkbox } from '@basmilius/desktop-ui';

import { useState } from 'react';
import { Checkbox } from '@basmilius/desktop-ui';

const SCRIPTS = ['dev', 'build', 'check', 'preview'];

export default function CheckboxDemo() {
    const [picked, setPicked] = useState<string[]>(['dev', 'build']);
    const all = picked.length === SCRIPTS.length;

    const toggle = (script: string, checked: boolean) => {
        setPicked((current) => (checked ? [...current, script] : current.filter((candidate) => candidate !== script)));
    };

    return (
        <div className="flex w-72 flex-col gap-2 text-sm text-text">
            <label className="flex items-center gap-2 font-medium">
                <Checkbox
                    label="Every script"
                    checked={all}
                    indeterminate={!all && picked.length > 0}
                    onCheckedChange={(checked) => setPicked(checked ? SCRIPTS : [])}
                />
                Every script
            </label>
            {SCRIPTS.map((script) => (
                <label key={script} className="flex items-center gap-2 pl-6">
                    <Checkbox label={script} checked={picked.includes(script)} onCheckedChange={(checked) => toggle(script, checked)} />
                    {script}
                </label>
            ))}
            <label className="flex items-center gap-2 pl-6 text-text-muted">
                <Checkbox label="test" checked={false} onCheckedChange={() => {}} disabled />
                test
            </label>
        </div>
    );
}

A checkbox has a label for its accessible name. Put the box and its visible text in one <label>, so a press on the text picks it too. Space toggles it from the keyboard.

A box that picks every row of a list is indeterminate while some rows are picked and some are not. It draws a dash, and a press picks every row; which rows it stands for is yours to keep.

Props

Prop	Type
checked	boolean	Required.
onCheckedChange	(checked: boolean) => void	Required.
label	string	Required.
indeterminate	boolean	Draws a dash. false by default.
disabled	boolean
className	string
ref	Ref<HTMLButtonElement>

CheckboxProps is an exported type.