Skip to content
Navius

Toggle

Overview

Section titled “Overview”

Toggle is a two-state button that can be pressed on or off. It can be controlled (@bind-Pressed) or uncontrolled (DefaultPressed), and reflects its state via aria-pressed.

Anatomy

Section titled “Anatomy”
@using Navius.Primitives.Components.Toggle


<NaviusToggle>
    Toggle
</NaviusToggle>

Root

Section titled “Root”
Prop Type Default Description
Pressed bool false Controlled pressed state. Pair with PressedChanged (@bind-Pressed).
PressedChanged EventCallback<bool> - Fires when the controlled Pressed value should change.
DefaultPressed bool false Initial pressed state when uncontrolled.
Disabled bool false -
ChildContent RenderFragment? - Toggle content.
Attributes IDictionary<string, object>? - Forwarded to the rendered button.

Data attributes

Section titled “Data attributes”
Part Attribute Description
Root data-pressed Present when the toggle is pressed (on).
Root data-disabled Present when disabled.

Keyboard interactions

Section titled “Keyboard interactions”
Key Behavior
Space Activates the toggle, flipping its state.
Enter Activates the toggle, flipping its state.

ARIA mechanism

Section titled “ARIA mechanism”

Implements the role and keyboard behavior of the button WAI-ARIA APG pattern: the rendered button carries aria-pressed reflecting the on/off state. Covered by the Playwright browser test suite and gated by axe-core in CI.