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

Radio cards

Peer-checked radio-tile group — a model-bound <koala-radio-card-group> wrapping one <koala-radio-card> per option. Each tile is an sr-only peer radio plus a styled <label> that lights up on selection. Replaces the hand-rolled selected-state card markup across the quote create flow.

<koala-radio-card-group>

Canonical

<koala-radio-card-group for="Input.OwnershipType" label="How is it owned?" columns="2">
    @foreach (var ownershipType in ownershipTypes)
    {
        <koala-radio-card value="@ownershipType" label="@ownershipType.Humanize()" />
    }
</koala-radio-card-group>

Bind the group to a model property with for (enum, bool, int, or string). Declare each option as a <koala-radio-card> child — the group owns the radio name and stamps checked on the tile whose value matches the bound model value. Tiles without an icon render the centred single-line layout.

Icon per card (variant)

Give each <koala-radio-card> an icon (an IconName) to switch the tile to the stacked icon-over-label layout used by the building-type picker. The icon renders at ExtraLarge above the label. Mix is per-card, but keep a group consistent. Widen the grid with columns (2–4) to fit the extra height. 

<koala-radio-card-group for="Input.BuildingType" label="What kind of property is it?" columns="3">
    <koala-radio-card value="House"    label="House"    icon="House" />
    <koala-radio-card value="Flat"     label="Flat"     icon="Building" />
    <koala-radio-card value="Bungalow" label="Bungalow" icon="MapPin" />
</koala-radio-card-group>

Bound to Input.BuildingType (a string). The tile reading "House" starts checked.

Props — <koala-radio-card-group>

6 attributes
Attribute Values Notes
for Model expression The model property the group binds to (enum, bool, int, or string). Owns the radio name and the selected value.
label string? Optional question label rendered above the tiles. Omit to render the tiles alone (caller supplies its own label).
columns 2 | 3 | 4 Number of grid columns. Default 2. Widen for icon tiles.
helper-text string? Renders the shared "What's this?" click-popover beneath the tiles. Null/empty hides it.
validation bool Render the inline validation message span beneath the tiles. Default true.
class string? Extra classes merged onto the wrapping <div>.

Props — <koala-radio-card>

3 attributes
Attribute Values Notes
value string The radio value submitted when this tile is selected. Accepts enums, bools, ints, or strings.
label string? Tile label. Ignored when inner content is supplied.
icon IconName? Optional icon rendered above the label — switches the tile to the stacked icon-over-label layout.
(inner content) markup Overrides the label attribute when richer markup is needed (e.g. a tile with a caption line).

Do & don't

Do Use radio cards for a small, finite single-choice set where tiles read better than a dropdown — ownership type, number of buyers, property kind.
Don't Don't reach for radio cards on a large unbounded set, or where validation re-renders matter — keep inline-validation off inside side trays and validate on submit.

The project convention is to validate radio groups on submit only — wrapping the group in koala-inline-validation-for re-renders on change and resets side-tray scroll, so most callers omit it.