Powerful suite of Blade components for TALL Stack apps.

Select

Select components.

# Basic Usage 

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

# Label & Hint

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]" />

# Multi-dimensional Array

An option to use multi-dimensional array.

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

# Invalidate

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

# Basic Usage

Customized styled select component to interact with Livewire.

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

# Label & Hint

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]" />

# Placeholders 

<!-- 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',
                 ]" ... />

# Required

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.

# Multiple 

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

# Multi-dimensional Array

An option to use multi-dimensional array.

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

# Disable Options

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" />

# Limit Selection

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 />

# Image Preview 

<!-- 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" />

# Description 

<!-- 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" />

# Searchable 

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

# Slot After

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>

# Events 

<!-- 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

# Concept

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.

For identification purposes, a header X-Tallstack-Ui is sent in the request.

# Basic Usage

Customized styled select component to interact with APIs.

<x-select.styled :request="route('api.users')"
                 select="label:name|value:id" />

# Advanced Usage 

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

The params are updated when you make changes. This means that if you are using this component within the Livewire components and create a variable to be used in params , when making any changes to this variable and Livewire hydrate the page, the next time the select is opened to make a new request, params will be updated in the request. This is useful to allow you to use the params to interact dynamically with the query of the request.

Code highlighting provided by Torchlight