Select

Displays a list of options for the user to pick from—triggered by a button.

Component Code 
<april:select class="w-72">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
    <option value="grape">Grape</option>
    <option value="pineapple">Pineapple</option>
</april:select>

Use x-model for the selected value. The component dispatches value-change with { detail: { value } } when the selection changes. The legacy change event remains available. The optional trigger slot customizes the trigger content and its attributes; the default trigger remains available when the slot is omitted.

Use wire:model or wire:model.live when Livewire owns the selected value. The value is synchronized from Livewire before browser changes are sent back, so bound selects do not issue an update during initialization.

For a single select, an empty bound value defaults to the first enabled option. This keeps the submitted field populated without requiring the user to open the picker first.

Multiple Select

The component also supports multiple select

Component Code 
<april:select class="w-72" multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
    <option value="grape">Grape</option>
    <option value="pineapple">Pineapple</option>
    <option value="pizza">Pizza</option>
</april:select>

Options

You can write plain option tags, as above. You can also use the select-option component, which gives you value, selected and disabled as attributes.

Component Code 
<april:select class="w-72" name="fruit">
    <april:select-option value="apple">Apple</april:select-option>
    <april:select-option value="banana" :selected="true">Banana</april:select-option>
    <april:select-option value="blueberry">Blueberry</april:select-option>
    <april:select-option value="grape" :disabled="true">Grape</april:select-option>
</april:select>

Native Select

You can optionally use the native brwoser select

Component Code 
<april:native-select class="w-72" aria-label="Fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
    <option value="grape">Grape</option>
    <option value="pineapple">Pineapple</option>
</april:native-select>

Accessibility

The trigger carries role="combobox" with aria-haspopup="listbox", so a screen reader announces a select rather than a button. It reports its state through aria-expanded and names its list through aria-controls. The list carries role="listbox", points back at the trigger with aria-labelledby, and reports aria-multiselectable when multiple is set. Each option carries role="option" with aria-selected and aria-disabled.

Publishing Views

Use the following commands to publish these views:

php artisan april:publish select
php artisan april:publish select-option
php artisan april:publish native-select
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.