choice-cards
Options as cards with a title and an explanation; one choice or several.
Example
Laravel
<x-admin::choice-cards name="g_type" label="Perk type" value="percent" :options="[
'percent' => ['label' => 'Percentage discount', 'description' => 'A share off the entry price.', 'icon' => 'gift'],
'fixed' => ['label' => 'Fixed amount', 'description' => 'A set amount off.'],
'free' => ['label' => 'Free entry', 'description' => 'No charge for the event.'],
]" />
<x-admin::choice-cards name="g_channels" type="checkbox" label="Notify by" class="mt" :value="['email']" :options="['email' => 'Email', 'slack' => 'Slack', 'webhook' => 'Webhook']" min="9rem" />Props
| Prop | Required | Default | Options |
|---|---|---|---|
name | yes | ||
label | null | ||
hint | null | ||
error | null | ||
id | null | ||
options | [] | ||
value | null | ||
type | "radio" | ||
min | "13rem" | ||
optional | false | ||
required | false |
Other attributes, such as wire:model or data-*, pass through to the element.
Other stacks
React and Vue: import { ChoiceCards } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.
HTML, for any stack
<fieldset class="adm-fieldset adm-choice-cards">
<legend class="adm-label">Perk type</legend>
<div class="adm-choice-cards__grid" style="--_min:13rem">
<label class="adm-choice">
<input type="radio" class="adm-choice__input" name="g_type" id="g_type_0" value="percent" checked aria-describedby="g_type_0-description" >
<span class="adm-choice__body">
<svg class="adm-icon adm-choice__icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5"/></svg> <span class="adm-choice__label">Percentage discount</span>
<span class="adm-choice__description" id="g_type_0-description">A share off the entry price.</span> </span>
</label>
<label class="adm-choice">
<input type="radio" class="adm-choice__input" name="g_type" id="g_type_1" value="fixed" aria-describedby="g_type_1-description" >
<span class="adm-choice__body">
<span class="adm-choice__label">Fixed amount</span>
<span class="adm-choice__description" id="g_type_1-description">A set amount off.</span> </span>
</label>
<label class="adm-choice">
<input type="radio" class="adm-choice__input" name="g_type" id="g_type_2" value="free" aria-describedby="g_type_2-description" >
<span class="adm-choice__body">
<span class="adm-choice__label">Free entry</span>
<span class="adm-choice__description" id="g_type_2-description">No charge for the event.</span> </span>
</label>
</div>
</fieldset>
<fieldset class="adm-fieldset adm-choice-cards mt">
<legend class="adm-label">Notify by</legend>
<div class="adm-choice-cards__grid" style="--_min:9rem">
<label class="adm-choice">
<input type="checkbox" class="adm-choice__input" name="g_channels[]" id="g_channels_0" value="email" checked >
<span class="adm-choice__body">
<span class="adm-choice__label">Email</span>
</span>
</label>
<label class="adm-choice">
<input type="checkbox" class="adm-choice__input" name="g_channels[]" id="g_channels_1" value="slack" >
<span class="adm-choice__body">
<span class="adm-choice__label">Slack</span>
</span>
</label>
<label class="adm-choice">
<input type="checkbox" class="adm-choice__input" name="g_channels[]" id="g_channels_2" value="webhook" >
<span class="adm-choice__body">
<span class="adm-choice__label">Webhook</span>
</span>
</label>
</div>
</fieldset>