# Checkbox

Source: https://lumeo.nativ.sh/components/checkbox

# Checkbox

A control that allows the user to toggle between checked and not checked.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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](/components/form#validation-pattern).

Preview Code

Default

Accept terms and conditions

Preview Code

With Binding

Enable notifications

Checked: True

Preview Code

Disabled

Disabled unchecked

Disabled checked

Preview Code

Multiple Options

Option A

Option B

Option C

Selected: A, C

Preview Code

Indeterminate (Select All)

Select All

Item 1

Item 2

Item 3

Preview Code

Animated Check

Draw-in check + box bounce

Preview Code

Haptic Feedback (Mobile)

On supported mobile browsers, checking or unchecking this checkbox triggers a short vibration via `navigator.vibrate(10)`. Desktop browsers silently no-op.

Haptic enabled — unchecked

## 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

Unchecked

Checked = true

Checked

### Disabled

Disabled = false

Enabled

Disabled = true

Disabled

### IsIndeterminate

IsIndeterminate = false

Determinate

IsIndeterminate = true

Indeterminate

### Invalid

Invalid = false

Accept terms

Invalid = true

Accept terms

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](/components/switch) — A toggle for on/off settings with immediate effect, like enabling dark mode.
-   [RadioGroup](/components/radio-group) — Use when only one option can be selected from a list.
-   [Toggle](/components/toggle) — A pressable button-style control for toggling a single state.