Checkbox
A control that allows the user to toggle between checked and not checked.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Checkbox />
When to Use
- Allow users to select multiple options from a list of choices.
- Present a single boolean toggle such as accepting terms and conditions.
- Implement "select all" patterns with indeterminate state for bulk actions.
For validation, label, and helper text, wrap this input in
<FormField>.
See Form › Validation Pattern.
Checked: True
Selected: A, C
On supported mobile browsers, checking or unchecking this checkbox triggers a short vibration via navigator.vibrate(10). Desktop browsers silently no-op.
Keyboard Interactions
| Key | Action |
|---|---|
| Space | Toggles the checkbox between checked and unchecked. |
| Tab | Moves focus to the next focusable element. |
| Shift+Tab | Moves focus to the previous focusable element. |
Parameter Coverage
Boolean parameters demoed in both states.
Checked
Checked = false
Checked = true
Disabled
Disabled = false
Disabled = true
IsIndeterminate
IsIndeterminate = false
IsIndeterminate = true
Invalid
Invalid = false
Invalid = true
Required
API Reference
Checkbox
| Property | Type | Default | Description |
|---|---|---|---|
| Checked | bool | false | Whether the checkbox is checked. Use with @bind-Checked for two-way binding. |
| CheckedChanged | EventCallback<bool> | — | Callback invoked when the checked state changes. |
| Disabled | bool | false | When true, prevents user interaction and dims the checkbox. |
| IsIndeterminate | bool | false | Shows a mixed/indeterminate state with a minus icon. |
| Animated | bool | false | When true and checked, the check mark draws itself in via stroke-dasharray and the box plays a 200ms scale bounce. |
| IsIndeterminateChanged | EventCallback<bool> | — | Two-way binding callback for the indeterminate flag. |
| Label | string? | null | Optional inline label rendered next to the checkbox. |
| Description | string? | null | Secondary text shown below the label. |
| Id | string? | null | Explicit HTML id; linked to the label for accessibility. |
| AriaLabel | string? | null | Accessible label for screen readers when no visible label is present. |
| Required | bool | false | Marks the field as required for form validation. |
| Invalid | bool | false | Applies a destructive ring to indicate a validation error. |
| ErrorText | string? | null | Error message shown below when Invalid is true (standalone). |
| HelperText | string? | null | Help text shown below when there is no error (standalone). |
| Name | string? | null | HTML name attribute for form identification. |
| FormField | FormFieldContext? | null | Cascaded context from a parent FormField; drives validation state automatically. |
| HapticFeedback | bool | false | When true, triggers a short haptic vibration via navigator.vibrate(10) on each state change. Silently no-ops on browsers without the Vibration API (e.g. iOS Safari). |
Related Components
- Switch — A toggle for on/off settings with immediate effect, like enabling dark mode.
- RadioGroup — Use when only one option can be selected from a list.
- Toggle — A pressable button-style control for toggling a single state.