Components / Toggle

Toggle

A two-state button that can be either on or off.

razor

<NaviusToggle @bind-Pressed="_pressed" aria-label="Toggle italic"
              class="... data-[pressed]:bg-accent data-[pressed]:text-accent-foreground">
    <ItalicIcon />
</NaviusToggle>

@code { private bool _pressed; }

Features

Full keyboard navigation.
Can be controlled (@bind-Pressed) or uncontrolled (DefaultPressed).
aria-pressed reflects the on/off state.
Renders a native button, so it is focusable and form-aware by default.

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.

Terminal bash

navius add toggle

Anatomy

Import the part and assemble it.

razor

@using Navius.Primitives.Components.Toggle

<NaviusToggle>
    Toggle
</NaviusToggle>

API Reference

Root

The toggle button. Renders a button.

Prop	Type	Default
Pressed	bool	false
PressedChanged	EventCallback<bool>	-
DefaultPressed	bool	false
Disabled	bool	false
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-pressed]	Present when the toggle is pressed (on)
[data-disabled]	Present when disabled

Accessibility

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

Keyboard interactions

Key	Description
`Space`	Activates the toggle, flipping its state.
`Enter`	Activates the toggle, flipping its state.