Components
Switches
Switches
Binary toggle — rectangular track + rectangular thumb, backed by a real checkbox so it round-trips through ASP.NET model binding without JavaScript. The standard 5px radius, no pill shape. For 2+ option segmented selection, reach for <koala-segmented-control> instead.
Canonical
Backed by a real <input type="checkbox"> so it round-trips through ASP.NET
model binding without JavaScript. The hidden false-default pattern is handled internally — an unticked box still
posts a value.
States
2 statesOff
On
Props
7 attributes| Attribute | Values | Notes |
|---|---|---|
| for | ModelExpression? | Property-bound switches. Mutually exclusive with name. |
| name | string? | Form field name for dynamic-name switches (inside loops). Pair with checked. |
| checked | bool | Initial checked state — required when using name. |
| value | string | Checkbox value. Defaults to "true"; set for multi-select patterns. |
| label | string? | Optional inline label rendered next to the switch. |
| x-model | string? | Wires the underlying checkbox to a parent Alpine state variable. |
| x-on:change | string? | Alpine handler that runs when the switch flips. Useful for auto-submit-on-change. |
Do & don't
Do
Use the switch for binary on/off — settings flags, "include X", visibility toggles.
A switch shown next to three mutually-exclusive options
Don't
Don't reach for a switch when you have 2+ mutually-exclusive choices — use
<koala-segmented-control> instead.