Powerful suite of Blade components for TALL Stack apps.

Select

Select components.

<x-select.native :options="[1,2,3]" />
You can choose 1, 2 or 3
<x-select.native label="Select One Option"
hint="You can choose 1, 2 or 3"
:options="[1,2,3]" />

An option to use multi-dimensional array.

<x-select.native :options="[
['label' => 'TALL', 'value' => 1],
['label' => 'LIVT', 'value' => 2],
]" select="label:label|value:value" />

An option to not show validation error message.

<x-select.native :options="[1,2,3]" invalidate />

This option is also available for the other select components below.

Styled Select

Customized styled select component to interact with Livewire.

<x-select.styled :options="[1,2,3]" />
You can choose 1, 2 or 3
<x-select.styled label="Select One Option"
placeholder="Custom Placeholder"
hint="You can choose 1, 2 or 3"
:options="[1,2,3]" />
<!-- Changing only the placeholder of the input -->
<x-select.styled placeholder="Custom Placeholder" ... />
 
<!-- Changing all placeholders -->
<x-select.styled :placeholders="[
'default' => 'This is the default placeholder',
'search' => 'This is the search placeholder',
'empty' => 'This is the empty placeholder',
]" ... />

An option to make the select component required.

<x-select.styled :options="[1,2,3]" required />

The user will not be able to deselect the selected option after selecting an option.

<x-select.styled :options="[1,2,3,4,5,6]" multiple />

An option to use multi-dimensional array.

<x-select.styled :options="[
['label' => 'TALL', 'value' => 1],
['label' => 'LIVT', 'value' => 2],
]" select="label:label|value:value" />

An option to disable specific options.

<x-select.styled :options="[
['label' => 'TALL', 'value' => 1, 'disabled' => true],
['label' => 'LIVT', 'value' => 2],
]" select="label:label|value:value" />

An option to limit the number of selections.

<!-- Applicable only when selection is multiple -->
 
<x-select.styled :limit="2" :options="[
['label' => 'TALL', 'value' => 1],
['label' => 'LIVT', 'value' => 2],
['label' => 'Blade', 'value' => 3],
['label' => 'API', 'value' => 4],
]" select="label:label|value:value" multiple />
<!-- The index of the image can be: `image`, `img`, or `img_src` -->
 
<x-select.styled :options="[
['label' => 'Taylor Otwell', 'value' => 1, 'image' => 'https://unavatar.io/github/taylorotwell'],
['label' => 'Nuno Maduro', 'value' => 2, 'image' => 'https://unavatar.io/github/nunomaduro'],
['label' => 'Jess Archer', 'value' => 3, 'image' => 'https://unavatar.io/github/jessarcher'],
]" select="label:label|value:value" />
<!-- The index of the description can be: `description` or `note` -->
 
<x-select.styled :options="[
['label' => 'Taylor Otwell', 'value' => 1, 'description' => 'Taylor Otwell is the creator of Laravel'],
['label' => 'Nuno Maduro', 'value' => 2, 'description' => 'Nuno Maduro is the creator of PestPHP'],
['label' => 'Jess Archer', 'value' => 3, 'description' => 'Jess Archer is the creator of Laravel Prompts'],
]" select="label:label|value:value" />
<x-select.styled :options="[
['label' => 'TALL', 'value' => 1],
['label' => 'LIVT', 'value' => 2],
]" select="label:label|value:value" searchable />

An option to interact with the search term when nothing is found.

<x-select.styled searchable :options="[1,2,3]">
<x-slot:after>
<div class="px-2 mb-2 flex justify-center items-center">
<x-button x-on:click="show = false; $dispatch('confirmed', { term: search })">
<span x-html="`Create user <b>${search}</b>`"></span>
</x-button>
</div>
</x-slot:after>
</x-select.styled>
<!-- Select: receive the select object in $event.detail.select -->
<!-- Remove: receive the removed object in $event.detail.select -->
 
<x-select.styled :options="[
['label' => 'TALL', 'value' => 1],
['label' => 'LIVT', 'value' => 2],
]" select="label:label|value:value"
x-on:select="alert(`Select: ${JSON.stringify($event.detail.select)}`)"
x-on:remove="alert(`Remove: ${JSON.stringify($event.detail.select)}`)"
multiple />
Styled API Select
The styled select component allows you to search for values through an API. In this mode, all the options available above remain available to be used, the difference is that instead of defining the options using the options parameter, you must specify the URL from which the results will come, together with the select parameter, which is mandatory for this mode.

Customized styled select component to interact with APIs.

<x-select.styled :request="route('api.users')"
select="label:name|value:id" />
<!-- Method can be 'get' or 'post' -->
 
<x-select.styled :request="[
'url' => route('api.users'),
'method' => 'get',
'params' => ['library' => 'TallStackUi'],
]" select="label:name|value:id" />

If you are using the select component to filter records in the database through Eloquent, this code may be useful. This is a snippet code that can be applied as a route in the routes/api.php file.

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
 
Route::get('/users', function (Request $request) {
// getting initial selected values
$selected = json_decode($request->get('selected', ''), true);
 
return User::query()
// searching when type in the select input
->when(
$search = $request->get('search'),
fn ($query) => $query->where('name', 'like', "%{$search}%")
)
->when(!$search && $selected, function ($query) use ($selected) {
// selecting the initial selected values
$query->whereIn('id', $selected)
// or selecting the other users ordered by creation date
->orWhere(function ($query) use ($selected) {
$query->whereNotIn('id', $selected)
->orderBy('created_at');
});
})
->limit(10)
->get()
// mapping to the expected format
->map(fn (User $user) => $user->only('id', 'name'));
})->name('api.users');
Previous
Modal
Next
Slide

Code highlighting provided by Torchlight