Checkbox and radio
A checkbox (acun:checkbox) and a radio button (acun:radio) in the brand color. The label is drawn inside the component; since the id is derived from the field name and value, the label is always linked to the box.
Checkbox
Pass the label with label; clicking the label also checks the box. Pass checked to have it checked initially. A checked box sends the value 1 by default; for a different value, use the value attribute.
<div class="flex flex-col gap-3">
<acun:checkbox name="email_notification" label="Email notification" checked />
<acun:checkbox name="sms_notification" label="SMS notification" />
</div>| Prop | Values |
|---|---|
label | Text next to the box |
checked | true | false |
Radio button
Give the buttons in the same group the same name and each a different value; only one of the group can be selected. The button id is generated as name-value.
<div class="flex flex-wrap gap-6">
<acun:radio name="customer_type" value="individual" label="Individual" checked />
<acun:radio name="customer_type" value="corporate" label="Corporate" />
</div>| Prop | Values |
|---|---|
name | Group name |
value | Value sent when selected |
checked | true | false |
Rich label
When label is not given, the slot is used as the label; useful when you need formatted content such as a link. Wrap the content in a single <span> so the gap between it and the box is not broken.
<acun:checkbox name="privacy_consent">
<span>I have read and accept the <a href="#" class="font-medium text-brand-600 hover:underline dark:text-brand-400">privacy notice</a>.</span>
</acun:checkbox>Disabled
The disabled attribute goes straight to the box or button; a disabled element is drawn faded, cannot be clicked, and the cursor turns into a not-allowed sign on hover. On radio buttons, the label turns gray as well.
<div class="flex flex-wrap gap-10">
<div class="flex flex-col gap-3">
<acun:checkbox name="auto_backup" label="Automatic backup" checked disabled />
<acun:checkbox name="bulk_sms" label="Bulk SMS (no permission)" disabled />
</div>
<div class="flex flex-col gap-3">
<acun:radio name="delivery_method" value="shipping" label="Standard shipping" checked />
<acun:radio name="delivery_method" value="same_day" label="Same-day delivery (not available in this area)" disabled />
</div>
</div>| Prop | Values |
|---|---|
disabled | Attribute |
With Livewire
Bind a single checkbox to a bool property with wire:model, and several boxes bound to the same property to an array; the array holds the value values of the checked boxes. For radio buttons, the group name comes from wire:model. These two components do not show validation errors; add the message below the group yourself.
<acun:checkbox wire:model="active" label="Active customer" />
<fieldset class="flex flex-col gap-3">
<legend class="mb-2 text-sm font-medium text-gray-700 dark:text-zinc-300">Shipping days</legend>
<acun:checkbox wire:model="days" value="monday" label="Monday" />
<acun:checkbox wire:model="days" value="wednesday" label="Wednesday" />
<acun:checkbox wire:model="days" value="friday" label="Friday" />
@error('days') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
</fieldset>
<acun:radio wire:model="priority" value="normal" label="Normal" />
<acun:radio wire:model="priority" value="urgent" label="Urgent" />Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
checkbox: label | null | Text next to it; the slot is used when not given |
checkbox: name | null | Field name; defaults to the wire:model value |
checkbox: checked | false | Initially checked |
checkbox: value (attribute) | 1 | Value sent while checked; the id becomes name-value |
radio: label | null | Text next to it; the slot is used when not given |
radio: name | null | Group name; defaults to the wire:model value |
radio: value | null | Value sent when selected; the id becomes name-value |
radio: checked | false | Initially selected |