Checkbox

A checkbox for options that are submitted or applied together. For a setting that takes effect immediately, use a Switch.

import { Checkbox } from 'jarvis-react-ui';

Basic

Without checked the checkbox keeps its own state; set the start state with defaultChecked. size="sm" makes box and text smaller.

import { Checkbox } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <div className="flex flex-col gap-3">
            <Checkbox label="Auto-scan" defaultChecked />
            <Checkbox label="Night mode" />
            <Checkbox label="Telemetry" size="sm" />
            <Checkbox label="Locked" defaultChecked disabled />
        </div>
    );
}

Indeterminate

indeterminate shows a dash for a mixed state, typically on a "select all" box when only some items are selected. Clicking it reports true. Control checked and indeterminate together from the state of the items.

import { useState } from 'react';
import { Checkbox } from 'jarvis-react-ui';

const SYSTEMS = ['Radar', 'Comms', 'Shields'];

export default function Indeterminate() {
    const [active, setActive] = useState<string[]>(['Radar']);
    const all = active.length === SYSTEMS.length;

    return (
        <div className="flex flex-col gap-3">
            <Checkbox
                label="All systems"
                checked={all}
                indeterminate={active.length > 0 && !all}
                onCheckedChange={(on) => setActive(on ? SYSTEMS : [])}
            />
            <div className="flex flex-col gap-2 pl-5">
                {SYSTEMS.map((name) => (
                    <Checkbox
                        key={name}
                        label={name}
                        checked={active.includes(name)}
                        onCheckedChange={(on) =>
                            setActive(on ? [...active, name] : active.filter((n) => n !== name))
                        }
                    />
                ))}
            </div>
        </div>
    );
}

Sound

Hovering plays hover_button and toggling plays click through the nearest SfxProvider. See Sound effects.

Accessibility

• A real <input type="checkbox"> stays in the DOM, visually hidden; the box graphic is aria-hidden. Space toggles it, and it works in forms with name and value.
• The label wraps the input, so it is the accessible name and clicking it toggles the box.
• indeterminate sets the native property, so screen readers announce "mixed".
• The ref is forwarded to the input.

API

Also accepts inherited props from InputHTMLAttributes (28), HTMLAttributes (53), AriaAttributes (53), DOMAttributes (168), RefAttributes (1), Attributes (1).