Skip to content
Sisyphos UI

Checkbox

Binary input with full tristate support (checked / unchecked / indeterminate), label association, semantic colors, and keyboard activation.

Forms & Inputs·Available inReactVueAngular·View as Markdown

Preview

tsx

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework
import { useState } from "react";
import { Checkbox } from "@sisyphos-ui/react";

export function Terms() {
  const [agreed, setAgreed] = useState(false);
  return (
    <Checkbox
      checked={agreed}
      onChange={setAgreed}
      label="I agree to the terms"
    />
  );
}

Semantic colors

tsx

Sizes

Three sizes match the scale system used by Input and Button.

tsx

API

PropTypeDefaultDescription
checked*boolean—Current checked state. Always controlled.
indeterminatebooleanfalseRenders the tristate "mixed" mark and exposes `aria-checked="mixed"`. Activating promotes to `checked=true`.
onChange(checked: boolean) => void—Called with the next boolean when the user toggles the input.
labelReactNode—Optional label rendered next to the box.
color"neutral" | "primary" | "success" | "error" | "warning" | "info""primary"Semantic color used when checked or indeterminate.
size"xs" | "sm" | "md" | "lg" | "xl""md"Box dimensions.
radius"radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl"—Border radius scale.
disabledbooleanfalseDisables interaction and applies the disabled visual.
idstring—Custom id used to link the label.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Checkbox WAI-ARIA design pattern.

  • aria-checked reflects the visual state — "true", "false", or "mixed" for the indeterminate value.
  • The DOM indeterminate flag is kept in sync alongside the ARIA attribute (assistive tech reads both).
  • aria-disabled mirrors disabled; the underlying <input> is also natively disabled to block submission.
  • The label is wired through htmlFor / id so screen readers announce the label when the input is focused.

Keyboard interactions

KeyAction
SpaceToggles the value. Indeterminate checkboxes promote to checked.
TabMoves focus to the next focusable element.
Need more?View on npm →
Was this page helpful?