Checkbox

<NaviusCheckbox @bind-Checked="_checked"
                class="... data-[checked]:bg-primary">
    <NaviusCheckboxIndicator class="flex items-center justify-center">
        <CheckIcon />
    </NaviusCheckboxIndicator>
</NaviusCheckbox>
<label>Accept terms and conditions</label>

@code { private bool _checked = true; }

Features

• Full keyboard navigation.
• Supports an indeterminate state (@bind-CheckedState with bool?).
• Can be controlled (@bind-Checked) or uncontrolled (DefaultChecked).
• Renders a hidden input so it participates in native form submission.
• role="checkbox" with the correct aria-checked state (including "mixed").

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add checkbox

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.Checkbox

<NaviusCheckbox>
    <NaviusCheckboxIndicator />
</NaviusCheckbox>

API Reference

Root

Contains all the parts of a checkbox. Renders a button.

Data attributes

Indicator

Renders when the checkbox is in a checked or indeterminate state. Renders a span.

Data attributes

Accessibility

Adheres to the tri-state checkbox WAI-ARIA design pattern.

Keyboard interactions