Option cards
Turns a radio button or checkbox into a clickable card with a title, a description and an icon. Suited to a small number of options that need explaining.
Single choice
The default type is radio. Give the cards in the same group the same name and each a different value; mark the initially selected one with checked. The whole card is clickable and the selected card is highlighted.
<div class="grid gap-3 md:grid-cols-3">
<acun:option-card name="billing_period" value="monthly" title="Monthly" description="Renews every month" />
<acun:option-card name="billing_period" value="yearly" title="Yearly" description="Two months free" checked />
<acun:option-card name="billing_period" value="lifetime" title="Lifetime" description="One-time payment" />
</div>| Prop | Values |
|---|---|
type | radio | checkbox |
name | Group name |
value | Submitted value |
checked | Initially selected |
With icons
icon adds an acun:icon to the right of the title. The icon starts gray and turns to the brand color when the card is selected. Use it to convey the difference between the options at a glance.
<div class="grid gap-3 md:grid-cols-3">
<acun:option-card name="shipping_method" value="standard" title="Standard shipping" description="Delivered in 2–4 business days" icon="truck" checked />
<acun:option-card name="shipping_method" value="express" title="Express shipping" description="At your door the next day" icon="bolt" />
<acun:option-card name="shipping_method" value="pickup" title="Store pickup" description="Collect it at your nearest branch" icon="building-storefront" />
</div>| Prop | Values |
|---|---|
icon | acun:icon name |
Multiple choice
With type="checkbox", more than one card can be selected. In a classic form, add [] to the end of the name so the values are submitted as an array.
<div class="grid gap-3 md:grid-cols-2">
<acun:option-card type="checkbox" name="notifications[]" value="sms" title="SMS" description="Shipping status updates" checked />
<acun:option-card type="checkbox" name="notifications[]" value="email" title="Email" description="Monthly summary" />
</div>| Prop | Values |
|---|---|
type | checkbox |
Rich description
If description is not given, the content you write inside the card is shown as the description. Use it for parts that need emphasis, such as an amount.
<div class="grid gap-3 md:grid-cols-2">
<acun:option-card name="plan" value="starter" title="Starter" checked>
<strong class="text-gray-900 dark:text-zinc-100">₺1,250</strong> per month, up to 5 users
</acun:option-card>
<acun:option-card name="plan" value="pro" title="Professional">
<strong class="text-gray-900 dark:text-zinc-100">₺2,000</strong> per month plus priority support
</acun:option-card>
</div>| Prop | Values |
|---|---|
description | Plain-text description |
(slot) | Content shown when there is no description |
Disabled option
The disabled attribute is passed to the inner field; the card is dimmed and cannot be selected. Suited to options that are not available right now but whose existence you want to show.
<div class="grid gap-3 md:grid-cols-2">
<acun:option-card name="payment" value="card" title="Credit card" description="Pay in full or in installments" checked />
<acun:option-card name="payment" value="cod" title="Cash on delivery" description="Not available in this region" disabled />
</div>| Prop | Values |
|---|---|
disabled | Cannot be selected and looks dimmed |
With Livewire
If you give only wire:model, the group name and the card ids are generated from that property. Checkbox cards bind to an array property.
@foreach (['standard' => 'Standard shipping', 'express' => 'Express shipping', 'pickup' => 'Store pickup'] as $value => $label)
<acun:option-card wire:model.live="shippingMethod" :value="$value" :title="$label" />
@endforeach
<acun:option-card type="checkbox" wire:model="channels" value="sms" title="SMS" />| Prop | Values |
|---|---|
wire:model | Radio: a single value · checkbox: an array |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
title | — | Card title (required) |
description | null | Description below the title; otherwise the slot content |
type | radio | radio · checkbox |
name | null | Group name; otherwise the wire:model value |
value | null | Value submitted when selected |
checked | false | Initially selected |
icon | null | acun:icon name to the right of the title; in the brand color when the card is selected |