Widgets
Checkbox
A focusable boolean toggle widget.
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).
- Mouse click focuses and toggles the checkbox.
- 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 });Related
- Select - Dropdown selection
- Radio Group - Exclusive-choice options
- Input & Focus - Focus model and navigation