WireUI
WireUI
Native Select

The Native Select component has support to render default html select with slot or options prop. See Examples.

Simple Options 
1<x-native-select
2    label="Select Status"
3    placeholder="Select one status"
4    :options="['Active', 'Pending', 'Stuck', 'Done']"
5    wire:model="model"
6/>
Custom Options 
 1<x-native-select
 2    label="Select Status"
 3    :options="[
 4        ['name' => 'Active',  'id' => 1],
 5        ['name' => 'Pending', 'id' => 2],
 6        ['name' => 'Stuck',   'id' => 3],
 7        ['name' => 'Done',    'id' => 4],
 8    ]"
 9    option-label="name"
10    option-value="id"
11    wire:model="model"
12/>
Option With Description 
 1<x-native-select
 2    label="Select Status"
 3    :options="[
 4        ['name' => 'Active',  'id' => 1],
 5        ['name' => 'Pending', 'id' => 2],
 6        ['name' => 'Stuck',   'id' => 3],
 7        ['name' => 'Done',    'id' => 4],
 8    ]"
 9    option-label="name"
10    option-value="id"
11    wire:model="model"
12/>
Slot Options 
1<x-native-select label="Select Status" wire:model="model">
2    <option>Active</option>
3    <option>Pending</option>
4    <option>Stuck</option>
5    <option>Done</option>
6</x-native-select>
Native Select Options

Options

Prop Required Default Type
label false none string
placeholder false none string
option-value false none string
option-label false none string
flip-options false false boolean
option-key-value false false boolean
options false none Collection|array|null
empty-message false __('wireui::messages.empty_options') string
hide-empty-message false false boolean