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.
<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.
With a Name set, the checkbox renders a hidden bubble input so it posts in a native form. Value is the string sent when checked (indeterminate posts as unchecked); an unchecked box posts nothing.
Styling hooks (data-state)
The checkbox exposes a data-state
attribute — checked,
unchecked, or
indeterminate — plus
data-disabled when disabled, so you
can target states from CSS without extra classes, e.g.
data-[state=checked]:border-primary.
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
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.