Switch

Overview

Switch is a control that toggles between an on and off state. It can be controlled (@bind-Checked) or uncontrolled (DefaultChecked), and renders a hidden mirror input so it participates in native form submission.

Anatomy

@using Navius.Primitives.Components.Switch

<NaviusSwitch>
    <NaviusSwitchThumb />
</NaviusSwitch>

Root

Contains all the parts of a switch. Renders a button with role="switch".

Prop	Type	Default	Description
Checked	bool	false	Controlled checked state. Pair with CheckedChanged (@bind-Checked).
CheckedChanged	EventCallback<bool>	-	Fires when the controlled Checked value should change.
DefaultChecked	bool	false	Initial checked state when used uncontrolled.
Disabled	bool	false	Disables the switch.
ReadOnly	bool	false	Keeps the switch focusable but its value cannot be changed.
Required	bool	false	Marks the control as required for native form validation.
Name	string?	-	Form field name applied to the hidden mirror input.
Value	string	"on"	Value submitted with the form when the switch is checked.
Form	string?	-	Optional id of an associated form element, for the hidden mirror input.
ChildContent	RenderFragment?	-	The Thumb.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered button.

Thumb

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

Prop	Type	Default	Description
ChildContent	RenderFragment?	-	Thumb content.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered span.

Data attributes

Part	Attribute	Description
Root	data-checked	Present when checked.
Root	data-unchecked	Present when unchecked.
Root	data-disabled	Present when disabled.
Root	data-readonly	Present when read-only.
Root	data-required	Present when required.
Thumb	data-checked	Present when checked.
Thumb	data-unchecked	Present when unchecked.
Thumb	data-disabled	Present when disabled.
Thumb	data-readonly	Present when read-only.
Thumb	data-required	Present when required.

Keyboard interactions

Key	Behavior
Space	Toggles the component’s state.
Enter	Toggles the component’s state.

ARIA mechanism

Root renders role="switch" with aria-checked reflecting the current state, plus aria-readonly and aria-required when set. It is rendered as a native button, so focus and Space/Enter activation come for free. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.