Checkbox

Checkbox is a client component that renders a button with role="checkbox" and an animated tick drawn with motion/react. It is controlled: the parent owns the checked state. Use it for task lists and other toggles that save immediately.

Import#

import { Checkbox } from "@reactberry/system/blocks";

Usage#

"use client";

import { useState } from "react";
import { Checkbox } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

export default function TaskRow() {
  const [done, setDone] = useState(false);

  return (
    <Box display="flex" alignItems="center" gap="s">
      <Checkbox
        checked={done}
        onChange={() => setDone((value) => !value)}
        ariaLabel="Write release notes"
      />
      <Text>Write release notes</Text>
    </Box>
  );
}

Examples#

Loading#

Set isLoading while a request is in flight. It shows an animated dots icon, hides the tick and blocks interaction.

Disabled#

disabled disables the button and blocks interaction. Use title to explain why.

Size and focus style#

size sets the width and height. containerProps is spread onto the button last, so it can override defaults such as the focus style.

API#

Checkbox#

• checked switches the skin from "panel" to "success.static" and animates the tick.
• onChange receives no arguments and is only called when not loading or disabled.
• title defaults to "Mark as incomplete" when checked and "Mark as complete" otherwise.
• containerProps (React.ComponentProps<typeof Group>) is spread onto the Group button last, so it can override any default prop.

No other props are accepted.

Accessibility#

• Renders a native button with role="checkbox" and aria-checked.
• Sets aria-disabled when loading or disabled, and aria-busy when loading.
• ariaLabel sets aria-label. Pass it, or label the checkbox another way, because the button has no text content.
• While loading or disabled, the button has the disabled attribute, so it can't be focused.
• The default focus style sets the border colour to "primary" on :focus-visible.

Notes#

• The click handler calls preventDefault and stopPropagation, so clicks do not bubble to parent rows or submit forms.
• It is not a native input type="checkbox" and has no name or value; it does not participate in form submission.
• The default title text is task-oriented; pass title for other contexts.