Skip to content

Checkbox

A focusable boolean toggle widget.

Usage

import { ui } from "@rezi-ui/core";

ui.checkbox({
  id: "opt-in",
  label: "Receive updates",
  checked: state.optIn,
  onChange: (checked) => app.update((s) => ({ ...s, optIn: checked })),
});

Props

Prop Type Default Description
id string required Unique identifier for focus and event routing
checked boolean required Current checked state
label string - Optional label displayed next to the box
onChange (checked: boolean) => void - Called when the user toggles the checkbox
disabled boolean false Disable focus and interaction
key string - Reconciliation key

Behavior

  • Focusable when enabled.
  • Toggle with Space (and commonly Enter depending on terminal key mapping).
  • Tab / Shift+Tab moves focus.

Examples

1) Unlabeled checkbox (icon-only)

import { ui } from "@rezi-ui/core";

ui.checkbox({ id: "flag", checked: state.flag, onChange: (c) => app.update((s) => ({ ...s, flag: c })) });

2) Disabled

import { ui } from "@rezi-ui/core";

ui.checkbox({ id: "tos", checked: true, label: "Accept terms", disabled: true });