---
title: Checkbox
url: "https://native-sdk.dev/docs/components/checkbox"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `checkbox` for a boolean value. The element content or `text` supplies the visible label; `label` supplies an accessible name without drawing text. Bind `checked` to the model and handle `on-toggle` in `update`. Use [radio](/docs/components/radio) to select one option, or [switch](/docs/components/switch) for a sliding on/off control.

## Markup

```html
<column gap="12">
  <checkbox checked="{accepted}" on-toggle="toggle_terms">Accept terms and conditions</checkbox>
  <checkbox checked="{reports}" on-toggle="toggle_reports">Send usage reports</checkbox>
  <checkbox checked="true" disabled="true">Managed by your organization</checkbox>
</column>
```

Store a boolean in the model and toggle it in `update`:

```ts
// model: { readonly accepted: boolean }
case "toggle_terms":
  return { ...model, accepted: !model.accepted };
```

```zig
// model: accepted: bool = false,
.toggle_terms => model.accepted = !model.accepted,
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:

```zig
ui.column(.{ .gap = 12 }, .{
    ui.checkbox(.{ .text = "Accept terms and conditions", .checked = model.accepted, .on_toggle = .toggle_terms }),
    ui.checkbox(.{ .text = "Send usage reports", .checked = model.reports, .on_toggle = .toggle_reports }),
    ui.checkbox(.{ .text = "Managed by your organization", .checked = true, .disabled = true }),
})
```

## Attributes

| Attribute   | Description                                                                                                                          |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `text`      | Text value for text-bearing elements; a literal or one \{binding}.                                                                   |
| `checked`   | Checked state for checkbox/toggle; true/false or a \{binding}.                                                                       |
| `disabled`  | Disables the control; true/false or a \{binding}.                                                                                    |
| `on-toggle` | Dispatch a Msg on toggle: tag or tag:\{payload}. Hit-target elements only (checkbox, toggle, toggle-button, switch, accordion, ...). |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)