Components Toggle

Toggle

Binary toggle — a fully-rounded (pill) track with a circular sliding thumb, backed by a real checkbox so it round-trips through ASP.NET model binding without JavaScript. For 2+ option segmented selection, reach for <koala-segmented-control> instead.

<koala-toggle>

Canonical

Reject new builds

<koala-toggle asp-for="Input.RejectNewBuilds" label="Reject new builds" />

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

3 states

Off

Disabled

Props

8 attributes

Attribute	Values	Notes
for	ModelExpression?	Property-bound toggles. Mutually exclusive with `name`.
name	string?	Form field name for dynamic-name toggles (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 toggle.
disabled	bool	Renders the toggle inert and dimmed (e.g. a per-kind switch whose channel master is off).
x-model	string?	Wires the underlying checkbox to a parent Alpine state variable.
x-on:change	string?	Alpine handler that runs when the toggle flips. Useful for auto-submit-on-change.

Do & don't

Email notifications

Do Use the toggle for binary on/off — settings flags, "include X", visibility toggles.

A toggle shown next to three mutually-exclusive options

Don't Don't reach for a toggle when you have 2+ mutually-exclusive choices — use <koala-segmented-control> instead.

Settings toggle row

<koala-settings-toggle-row> wraps a toggle in the standard settings-row layout — a title and optional description on the left, the control on the right. It owns the row layout, title, and description; the <koala-toggle> (however it's wired) is its child content. Stack several in a space-y-5 container. Use it for settings flags; for a section/card master toggle keep a koala-section-title header.

Reject new build purchases

When enabled, purchase-only quotes for new build properties are rejected.

Reject shared ownership purchases

When enabled, quotes whose purchase is part of a shared ownership scheme are rejected.

<koala-settings-toggle-row title="Reject new build purchases"
                           description="When enabled, purchase-only quotes for new build properties are rejected.">
    <koala-toggle asp-for="Input.RejectNewBuilds" />
</koala-settings-toggle-row>

Attribute	Values	Notes
title	string	The row's primary label.
description	string?	Optional helper text under the title.
class	string?	Outer spacing only (e.g. `mb-6`); the flex layout is owned by the helper.
(content)	slot	The control on the right — almost always a `<koala-toggle>`.