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.
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.
Variants
2 tile layouts
The layout is chosen per card. Without an icon a
<koala-radio-card> renders the centred single-line tile; give it an
icon (an IconName) to switch 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>
The icon group is bound to Input.BuildingType (a
string). The tile reading "House"
starts checked.
States
4 statesProps — <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>. |
Do & don't
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.
Radio card
One option tile inside the group — the sr-only peer radio plus
its styled <label>. Must be a direct child of
<koala-radio-card-group>: it reads the radio
name and the selected value from the group. Supply inner content to
replace the label text with richer markup, such as a caption line.
<koala-radio-card-group for="Input.BuildingType" columns="2">
<koala-radio-card value="SemiDetached" label="Semi-detached" />
<koala-radio-card value="Maisonette">
<span class="font-medium">Maisonette</span>
<span class="block koala-caption">Own front door</span>
</koala-radio-card>
</koala-radio-card-group>| 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). |