Checkbox
A control that allows the user to toggle between checked and not checked
Divergence from Blok
Ergonomic helpers baked in on top of Blok's bare primitive. Blok's Checkbox is a thin Radix wrapper with no label/description. We add Label (string) and Description (string) for the common checkbox-with-text pattern, plus Enhanced which wraps the whole control in a bordered card (the common "opt-in with explanation" pattern), plus Indeterminate and DefaultChecked. All additive — leave them unset to get Blok's bare behaviour. Bare usage composes a <Label> sibling yourself.
Examples
Default
With label
Enhanced with label and description
Disabled
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Checkbox | Tri-state checkbox with optional built-in label/description. Controlled via Checked (nullable bool?); pass true/false/null to represent checked/unchecked/indeterminate. |
Checkbox
Tri-state checkbox with optional built-in label/description. Controlled via Checked (nullable bool?); pass true/false/null to represent checked/unchecked/indeterminate.
| Property | Type | Required | Description |
|---|---|---|---|
| Checked | bool? | Controlled state. true = checked, false = unchecked, null with Indeterminate=true = indeterminate. Use @bind-Checked for two-way binding. | |
| CheckedChanged | EventCallback<bool?> | Fires when the user toggles the checkbox. Supports @bind-Checked. | |
| DefaultChecked | bool? | Uncontrolled initial state. Only honoured when Checked is null. | |
| Indeterminate | bool | When true and Checked is null, renders a minus-glyph indeterminate state. Default: false. | |
| Disabled | bool | When true, the checkbox is non-interactive. Default: false. | |
| Label | string? | Built-in label text. When set, rendered as a Label associated with the checkbox via for/id. | |
| Description | string? | Helper text shown under the Label. Only applies when Label is also set. | |
| Enhanced | bool | When true, wraps the checkbox + label + description in a bordered card that highlights when checked. Default: false. | |
| Id | string? | Element id. Default: a new GUID. Used to associate the built-in Label with the checkbox. | |
| ClassName | string? | Extra CSS classes appended to the checkbox button. | |
| ChildContent | RenderFragment? | Extra content rendered alongside the checkbox in the non-enhanced layout (e.g. a custom trailing element). |