Switch

Overview

Switch renders NaviusSwitch (role="switch", keyboard-operable, a hidden input for form submission) wrapping a NaviusSwitchThumb. Checked is forwarded to the primitive only when the consumer set it (@bind-Checked or one-way Checked), so the uncontrolled DefaultChecked path stays live.

Install

navius add switch --to ./src/MyApp --namespace MyApp.Ui

Usage

<ZitsSwitch @bind-Checked="_on" id="airplane" />
<ZitsLabel For="airplane">Notifications @(_on ? "on" : "off")</ZitsLabel>

@code { private bool _on = true; }

Parts and props

Switch is a single control with no part tree. CheckedChanged, DefaultChecked, Disabled, ReadOnly, Name, Value, Required, Form, and Attributes pass through to NaviusSwitch unchanged, plus Checked conditionally (only when set by the caller, controlled usage). The styled wrapper adds no new prop; the thumb is always rendered (no ChildContent override).

Styling surface

Attributes on ZitsSwitch is forwarded to the rendered switch element and merged with the base track classes via Cn.Merge, caller classes applied last. The thumb’s classes are fixed (not independently overridable). There are no variant/size parameters.

Data attribute hooks

Part	Attribute	Description
Root	`data-checked` / `data-unchecked`	Selects the track fill (`bg-primary`/`bg-input`) and the thumb’s translate distance, emitted by `NaviusSwitch`.