Checkbox
Overview
Section titled “Overview”Checkbox renders NaviusCheckbox (role checkbox, tri-state, data-state, form input)
with a NaviusCheckboxIndicator holding a checkmark SVG, and layers the base Tailwind
class set on top. Checked/CheckedState are forwarded to the primitive only when the
consumer actually supplies them, so the uncontrolled DefaultChecked/DefaultCheckedState
paths stay live rather than being forced into always-controlled mode.
Install
Section titled “Install”navius add checkbox --to ./src/MyApp --namespace MyApp.Ui@using Zits.Ui.Components
<div class="flex items-center gap-3"> <ZitsCheckbox @bind-Checked="_terms" id="terms" /> <ZitsLabel For="terms">Accept terms and conditions</ZitsLabel></div>Parts and props
Section titled “Parts and props”Checkbox composes a fixed part tree (NaviusCheckbox + one NaviusCheckboxIndicator);
there is no part the consumer swaps. Checked, CheckedChanged, DefaultChecked,
CheckedState, CheckedStateChanged, DefaultCheckedState, Disabled, ReadOnly,
Required, Parent, Name, and Value are the primitive’s own props and pass through
unchanged (aside from the controlled-forwarding nuance above, which is not visible to
callers). The styled wrapper adds no new props of its own; its only contribution is the
checkmark SVG inside NaviusCheckboxIndicator and the base Tailwind class set.
Styling surface
Section titled “Styling surface”Attributes on ZitsCheckbox merges with the base class set via Cn.Merge and forwards
to NaviusCheckbox. The indicator’s own class is fixed (not overridable per instance).
Data attribute hooks
Section titled “Data attribute hooks”| Part | Attribute | Description |
|---|---|---|
| Root | data-checked |
Present when checked, emitted by the composed NaviusCheckbox primitive; targeted by the base class for the filled/primary state. |
| Root | data-indeterminate |
Present when CheckedState is null (tri-state), emitted by the composed primitive; targeted by the base class. |