The Native select component offers a versatile and user-friendly way to customize and configure options. It provides multiple methods for passing options, from assigning an array of values where the name and ID match to specifying them independently. Additionally, this component allows for extensive customization by passing options through the default slot, granting users the flexibility to tailor the select component to their specific needs and preferences.

A straightforward method for configuring options is to use an array of values in which the name and ID are identical.

1<x-native-select
2    label="Select Status"
3    placeholder="Select one status"
4    :options="['Active', 'Pending', 'Stuck', 'Done']"
5/>

Should you prefer, you have the option to pass an array where you can specify the name and ID separately.

1<x-native-select label="Select Status" :options="[
2    ['name' => 'Active', 'id' => 1],
3    ['name' => 'Pending', 'id' => 2],
4    ['name' => 'Stuck', 'id' => 3],
5    ['name' => 'Done', 'id' => 4],
6]" option-label="name" option-value="id" />

Another customization option is to assign the description field to a king, which will be displayed after the name.

1<x-native-select label="Order Status" placeholder="Select one status" :options="[
2    ['name' => 'Active', 'id' => 1, 'description' => 'The status is active'],
3    ['name' => 'Pending', 'id' => 2, 'description' => 'The status is pending'],
4    ['name' => 'Stuck', 'id' => 3, 'description' => 'The status is stuck'],
5    ['name' => 'Done', 'id' => 4, 'description' => 'The status is done'],
6]" option-label="name" option-value="id" />

For even more extensive customization, you can pass the options in the default slot within the native select component.

1<x-native-select label="Select Status">
2    <option>Active</option>
3    <option>Pending</option>
4    <option>Stuck</option>
5    <option>Done</option>
6</x-native-select>