x-larastrap::select is the equivalent of a "select" HTML node, with his own options .
@php
$options = ['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue'];
@endphp
<x-larastrap::select label="Choose One" :options="$options" />
<div class="row mb-3">
<label for="select-9f0f2fe6" class="col-4 col-form-label">Choose One</label>
<div class="col-8">
<select id="select-9f0f2fe6" class="form-select" name="JTcRYvufU8">
<option value="red">
Red
</option>
<option value="green">
Green
</option>
<option value="blue">
Blue
</option>
</select>
</div>
</div>
options can be a simple associative array where keys are the HTML values and values are the related labels. But each value in the options can also be an object, holding a few attributes to better describe each item. Among them:
@php
$options = [
'first' => (object) [
'label' => 'First',
],
'second' => (object) [
'label' => 'Second',
'disabled' => true,
],
'third' => (object) [
'label' => 'Third',
'children' => [
'third_1' => (object) [
'label' => 'Third / First',
],
'third_2' => (object) [
'label' => 'Third / Second',
'disabled' => true,
],
'third_3' => (object) [
'label' => 'Third / Third',
'attributes' => [
'data-attr' => 'value',
],
],
],
],
];
@endphp
<x-larastrap::select label="Choose One" :options="$options" />
<div class="row mb-3">
<label for="select-fa4ac815" class="col-4 col-form-label">Choose One</label>
<div class="col-8">
<select id="select-fa4ac815" class="form-select" name="N0OKprMf9O">
<option value="first">
First
</option>
<option value="second" disabled>
Second
</option>
<optgroup label="Third">
<option value="third_1">
Third / First
</option>
<option value="third_2" disabled>
Third / Second
</option>
<option value="third_3" data-attr="value">
Third / Third
</option>
</optgroup>
</select>
</div>
</div>
The x-larastrap::select-model variant permits to use objects (eventually: Eloquent models) as options.
@php
$users = App\Models\User::inRandomOrder()->take(3)->get();
@endphp
<x-larastrap::select-model label="Select a User" :options="$users" />
<div class="row mb-3">
<label for="select-9d7e84b5" class="col-4 col-form-label">Select a User</label>
<div class="col-8">
<select id="select-9d7e84b5" class="form-select" name="oGx98FDnhl">
<option value="6">
Prof. Elmo Rosenbaum
</option>
<option value="7">
Eliezer Luettgen
</option>
<option value="8">
Gerard McGlynn
</option>
</select>
</div>
</div>
The -model
variants are able to set their own value accordingly to the Eloquent relationships of the reference entity (the one assigned as obj
of the parent x-larastrap::form
), as long as their name
matches the attribute to which the relationship itself is exposed.
@php
// In this example, the User model has a "boss" relationship defined as
//
// public function boss()
// {
// return $this->belongsTo(User::class);
// }
$ref = App\Models\User::has('boss')->inRandomOrder()->first();
$bosses = App\Models\User::doesntHave('boss')->orderBy('name', 'asc')->get();
@endphp
<x-larastrap::form :obj="$ref">
<x-larastrap::select-model name="boss" :label="sprintf('Select a Boss for %s', $ref->name)" :options="$bosses" />
</x-larastrap::form>
<form id="form-8028fbe6" class="" method="post" name="form-8028fbe6">
<input type="hidden" name="_token" value="V4qcwIxfF6Xz7BCAnbERiZELNHQM5GeXKZdjibAw" autocomplete="off">
<div class="row mb-3">
<label for="select-1ad9c0f8" class="col-4 col-form-label">Select a Boss for Ebba Olson I</label>
<div class="col-8">
<select id="select-1ad9c0f8" class="form-select" name="boss">
<option value="7" selected>
Eliezer Luettgen
</option>
<option value="9">
Erica Krajcik
</option>
<option value="8">
Gerard McGlynn
</option>
<option value="6">
Prof. Elmo Rosenbaum
</option>
<option value="10">
Shany Bosco
</option>
</select>
</div>
</div>
<div class="col-12 text-end">
<button id="button-252219e9" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
For -model
variant it is assumed that models into the options
collection have an "id" and a "name" attribute to be used (respectively: as the value and the label of each item).
If your models have a different structure, or you want to display different labels, it is possible to pass a translateCallback parameter with a function to translate your actual content: it has to accept a parameter (the model to be translated) and must return an array with two elements (the value and the label of the final selectable option).
@php
$users = App\Models\User::inRandomOrder()->take(3)->get();
$translate = fn($obj) => [$obj->id, $obj->email];
@endphp
<x-larastrap::select-model label="Select a User" :options="$users" :translateCallback="$translate" />
<div class="row mb-3">
<label for="select-23b21f60" class="col-4 col-form-label">Select a User</label>
<div class="col-8">
<select id="select-23b21f60" class="form-select" name="hhjfsMqr4p">
<option value="9">
genevieve.reinger@example.com
</option>
<option value="2">
ebert.jeremy@example.net
</option>
<option value="4">
lschultz@example.com
</option>
</select>
</div>
</div>
The -model
variants have also an extra_options
parameter to define other options aside those collected in options
. This is useful to add a "void" item to be choosen by the user.
@php
$users = App\Models\User::inRandomOrder()->take(3)->get();
@endphp
<x-larastrap::select-model label="Select a User" :options="$users" :extra_options="[0 => 'None']" value="0" />
<div class="row mb-3">
<label for="select-0dba2bbb" class="col-4 col-form-label">Select a User</label>
<div class="col-8">
<select id="select-0dba2bbb" class="form-select" name="daTj9f1g3r">
<option value="0" selected>
None
</option>
<option value="1">
Jules Wunsch
</option>
<option value="9">
Erica Krajcik
</option>
<option value="3">
Jessyca Goyette
</option>
</select>
</div>
</div>