Select
A labeled select box. The options come from the options array or from the slot; label, hint and error behavior are the same as acun:input.
Basic usage
Pass the options with options as a value => text array. placeholder adds a first option at the top that does not appear in the list; once the user makes a choice, they cannot return to this empty value. This text is shown in the box while the value is null or an empty string.
<acun:select wire:model="status" label="Status" :options="['1' => 'Active', '0' => 'Inactive']" placeholder="Select…" />| Prop | Values |
|---|---|
options | value => text array |
placeholder | First option that cannot be selected |
Options in the slot
When you need grouped options or per-option attributes, write <option> and <optgroup> elements in the slot. When used together with options, the options in the slot come first.
<acun:select name="payment_method" label="Payment method">
<optgroup label="Card payment">
<option value="credit_card">Credit card</option>
<option value="debit_card">Debit card</option>
</optgroup>
<optgroup label="Other">
<option value="bank_transfer">Bank transfer</option>
</optgroup>
</acun:select>Floating label
variant="floating" places the label on the top edge of the box. Since a select box always shows a value, the label always stays at the top; it turns the primary color on focus. It gives a consistent look in the same form as floating-label text inputs.
<acun:select name="district" variant="floating" label="District" :options="['kadikoy' => 'Kadıköy', 'besiktas' => 'Beşiktaş', 'uskudar' => 'Üsküdar']" />| Prop | Values |
|---|---|
variant | default | floating |
Hint and validation error
hint shows help text below. If $errors contains an error for the field's name, the border turns red, the message replaces the hint and the box gets aria-invalid="true". The hint or error message is linked to the box with aria-describedby (id: the box id + -message); your own aria-describedby value is kept. required puts an asterisk next to the label.
<div class="space-y-4">
<acun:select wire:model="customer_group" label="Customer group" :options="['retail' => 'Retail', 'wholesale' => 'Wholesale']" hint="The price list applied to the customer." />
<acun:select wire:model="carrier_id" label="Carrier" required :options="['1' => 'Swift Cargo', '2' => 'Express Courier']" placeholder="Select…" />
</div>| Prop | Values |
|---|---|
hint | Help text below |
With Livewire
Use wire:model.live so that the bound value is sent to the server as soon as it changes. For boxes added later by a Livewire update (e.g. a field revealed in an @if block), the selected value is reapplied in the next tick; no extra code is needed.
<acun:select wire:model.live="district_id" label="District" :options="$districts" placeholder="Select…" />
@if ($district_id)
<acun:select wire:model="neighborhood_id" label="Neighborhood" :options="$neighborhoods" placeholder="Select…" />
@endifProps and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
label | null | Label; * is added next to it when the required attribute is present |
name | null | Field name; defaults to the wire:model value |
options | [] | value => text; listed after the options in the slot |
placeholder | null | First option that does not appear in the list; shown while the value is null or empty |
variant | default | default · floating |
hint | null | Help text below while there is no error; linked to the field with aria-describedby |
(attributes) | — | wire:model, required, disabled, id … go straight to the <select> element; a disabled box is drawn with a gray background and text |