Switch

<NaviusSwitch @bind-Checked="_on" id="airplane"
              class="... data-[checked]:bg-primary">
    <NaviusSwitchThumb class="... data-[checked]:translate-x-5" />
</NaviusSwitch>
<label for="airplane">Airplane mode</label>

@code { private bool _on; }

Features

• Full keyboard navigation.
• Can be controlled (@bind-Checked) or uncontrolled (DefaultChecked).
• Renders a hidden input so it participates in native form submission.
• role="switch" with the correct aria-checked state.

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 switch

Anatomy

Import the part and assemble it.

@using Navius.Primitives.Components.Switch

<NaviusSwitch>
    <NaviusSwitchThumb />
</NaviusSwitch>

API Reference

Root

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

Data attributes

Thumb

The thumb that is toggled to indicate state. Renders a span.

Data attributes

Accessibility

Implements the role, state, and keyboard map of the switch WAI-ARIA APG pattern. Covered by the browser test suite and an axe-core WCAG gate in CI.

Keyboard interactions