Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
Components Checkbox

Checkbox

A styled <input type="checkbox"> so every checkbox — filter options, note-visibility, terms acceptance — shares one look. An ELEMENT helper, not an attribute on <input>: rendering the input ourselves lets for bind a bool (with the hidden false field) and keeps passthrough attributes intact.

<koala-checkbox>

Canonical

<label class="flex items-center gap-2">
    <koala-checkbox for="Input.IsCompany" />
    <span class="text-on-surface">This is a company</span>
</label>

for binds a bool model property. The helper emits the input and a hidden false field, so unchecking still posts false rather than dropping the value entirely.

In a label row

Outside model-bound mode, set name, value and a bound checked="@accepted". Wrap the input + caption in a <label class="flex items-center gap-2"> so clicking the text toggles the box. 

<label class="flex items-center gap-2 cursor-pointer">
    <koala-checkbox name="AcceptTerms" value="true" checked="@accepted" />
    <span class="text-on-surface">I accept the terms</span>
</label>

Multi-value group

Repeat the same name with distinct values to post a set (filter options, visibility audiences). Each checked box contributes its value to the posted list. 

@foreach (var v in visibilities)
{
    <label class="flex items-center gap-2 cursor-pointer">
        <koala-checkbox name="Visibility" value="@v.Key" checked="@v.Selected" />
        <span class="text-on-surface">@v.Label</span>
    </label>
}

For Alpine-managed groups, bind x-model to an array and pass UI-only handlers like x-on:change — both pass straight through to the rendered input. 

<label class="flex items-center gap-2 cursor-pointer">
    <koala-checkbox name="Visibility" value="Partner" x-model="options"
                    x-on:change="$dispatch('filter-changed')" />
    <span class="text-on-surface">Visible to partner</span>
</label>

States

3 states
Unchecked
Checked
Disabled
<label class="flex items-center gap-2 opacity-60">
    <koala-checkbox name="Locked" value="true" checked="true" disabled />
    <span class="text-on-surface">Locked (can't change)</span>
</label>

Props

3 attributes + passthrough
Attribute Values Notes
for Model expression Switches on model-bound mode. Binds name / id / checked from a bool property and emits the hidden false field so unchecking posts false.
checked bool Non-for mode only. Renders the checked attribute when true. Bind it to a conditional (checked="@selected").
class string? Extra classes appended after the base .koala-checkbox styling.
name / value / id passthrough Standard checkbox attributes in non-for mode. Repeat the same name with different values for a multi-value group.
x-model / x-on:* / disabled / aria-* / data-* passthrough Any non-prop attribute passes straight through to the rendered <input> — both in for and explicit modes.

Do & don't

Do Wrap the checkbox and its caption in a
Don't Don't hand-roll a raw with bespoke classes — it drifts from the shared look and skips the hidden false field on bound bools.

Radio

<koala-radio> is the element counterpart of <koala-checkbox> for the cases where the radio circle is visible in a label row — role pickers, the stamp-duty situation, discount selection, referrer reassign. (For the hidden-radio selected-tile pattern, reach for koala-radio-card-group instead.) The surrounding <label> / row layout stays at the call site — it legitimately varies (plain rows, bordered selectable cards, rich descriptions). Styling is the shared .koala-radio class. 

<label class="flex items-center gap-3 cursor-pointer">
    <koala-radio name="buyerSituation" value="FirstTimeBuyer" checked="@(situation == FirstTimeBuyer)" />
    <span class="text-on-surface">I''m a first time buyer</span>
</label>
Attribute Values Notes
checked bool Renders the checked attribute when true. Bind it to a conditional (checked="@(x == y)").
class string? Extra classes appended after the base .koala-radio styling (e.g. mt-0.5 to align with a multi-line label).
name / value / id passthrough Standard radio attributes — same name across the group, distinct values.
x-model / x-on:* / disabled / aria-* / data-* passthrough Any non-prop attribute passes straight through to the rendered <input>.