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.

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>

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`.