navius

Components / Switch

Switch

A control that toggles between an on and off state.

razor
<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

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

Terminal bash
navius add switch

Anatomy

Import the part and assemble it.

razor
@using Navius.Primitives.Components.Switch

<NaviusSwitch>
    <NaviusSwitchThumb />
</NaviusSwitch>

API Reference

Root

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

Prop Type Default
Checked bool false
CheckedChanged EventCallback<bool> -
DefaultChecked bool false
Disabled bool false
Required bool false
Name string? -
Value string "on"
Form string? -

Data attributes

Data attribute Values
[data-checked] Present when checked
[data-unchecked] Present when unchecked
[data-disabled] Present when disabled

Thumb

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

Prop Type Default
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-checked] Present when checked
[data-unchecked] Present when unchecked
[data-disabled] Present when disabled

Accessibility

Adheres to the switch WAI-ARIA design pattern.

Keyboard interactions

Key Description
Space Toggles the component's state.
Enter Toggles the component's state.