Checkbox nativelite

A labelled checkbox; bind checked.

A2UI basic: CheckBox
Children: none

Preview

Loading the renderer…

labelrequired

namerequired

checked

disabled

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "start",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Checkbox",
          "label": "I agree",
          "name": "agree",
          "checked": false
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Checkbox rendered by the React renderer on Web — **Web** React

Checkbox rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Checkbox rendered by the Compose renderer on Android — **Android** Compose

Checkbox rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-checkbox, painted by each native renderer.

Variants

checked

disabled

Props

Prop	Type	Default	Description
`label`requiredbind	`string`	–	The text beside the box.
`name`required	`string`	–	The field's key in the submitted data.
`checked`bind	`boolean`	`false`	The state; bind it.
`disabled`	`boolean`	`false`	Shows it inert.
`checks`	`[check]`	–	Validation rules.

Events and slots

Name	Kind
`on.change`	event: runs an action

Accessibility

Role: checkbox
Semantics: checkbox

Keys	Action
`Space`	toggle

Theming

Recipe parts: Checkbox/rootCheckbox/boxCheckbox/checkCheckbox/labelCheckbox/description
Keyed by: checkeddisabled:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Checkbox

A 16px rounded square that holds a TABLE's selection — the bulk-select column of an issue list and nothing else.

It is deliberately NOT the multi-select affordance in a picker: every option row on all four clients marks itself with the leading circle pair (ui-selected / ui-unselected), so a checkbox inside a picker would make web the only client drawing selection twice. Checked takes the primary fill under the primary foreground; indeterminate is the same box with a minus.

Webok

Checkboxpackages/ui/src/checkbox.tsx

iOSn/a

no checkbox exists: a multi-select row draws the ui-selected / ui-unselected circle pair

Androidn/a

same as iOS — the sheet's option rows carry the circle glyph pair, never a box

Desktopok

controls::inputs::checkboxapps/desktop/crates/exponential-ui-gpui/src/controls/inputs.rs

glass box (row fill, strong stroke, radius SM), primary when checked, ui-check / ui-minus; bulk-select + checklist rows