wehub-resource-sync
60 lines
2.0 KiB
Plaintext
60 lines
2.0 KiB
Plaintext
import { ComponentPreview } from "@/components/component-preview";
|
|
import { AttrTable } from "@/components/attr-table";
|
|
import { CodeToggle } from "@/components/code-toggle";
|
|
|
|
# Checkbox
|
|
|
|
A binary value control: the label rides the `text` attribute — checkbox is not a text-bearing element, so text content between the tags is rejected with a teaching error (`label="..."` alone names one for accessibility without a visible label). The model binds `checked`, and `on-toggle` dispatches its Msg — the engine never flips state on its own. For a single choice among options, use [radio](/components/radio); for an on/off setting rendered as a sliding thumb, use [switch](/components/switch).
|
|
|
|
<ComponentPreview name="checkbox" alt="Checkboxes rendered by the engine" caption="checked, unchecked, and disabled checkboxes" />
|
|
|
|
## Markup
|
|
|
|
```html
|
|
<column gap="12">
|
|
<checkbox checked="{accepted}" on-toggle="toggle_terms" text="Accept terms and conditions" />
|
|
<checkbox checked="{reports}" on-toggle="toggle_reports" text="Send usage reports" />
|
|
<checkbox checked="true" disabled="true" text="Managed by your organization" />
|
|
</column>
|
|
```
|
|
|
|
The core side is one boolean per box and one arm flipping it:
|
|
|
|
<CodeToggle>
|
|
|
|
```ts
|
|
// model: { readonly accepted: boolean }
|
|
case "toggle_terms":
|
|
return { ...model, accepted: !model.accepted };
|
|
```
|
|
|
|
```zig
|
|
// model: accepted: bool = false,
|
|
.toggle_terms => model.accepted = !model.accepted,
|
|
```
|
|
|
|
</CodeToggle>
|
|
|
|
## 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
|
|
|
|
<AttrTable
|
|
attrs={[
|
|
"text",
|
|
"checked",
|
|
"disabled",
|
|
"on-toggle",
|
|
]}
|
|
/>
|