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

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

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

Implements the roles, states, and keyboard map of the tri-state checkbox WAI-ARIA APG pattern. Behavior is covered by the browser test suite and an axe-core WCAG gate in CI.

Keyboard interactions