V2 is in public beta! 🎉 Report any issues on the repository.

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

When the value and label do not come from the label and value positions respectively, you must specify this manually using the select attribute: 

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

# Grouped 

<x-select.native group :options="[
     [
         'label' => 'Brazil',
         'value' => [
             ['label' => 'São Paulo', 'value' => 4],
             ['label' => 'Rio de Janeiro', 'value' => 5],
             ['label' => 'Brasília', 'value' => 6]
         ]
     ],
     [
         'label' => 'United States',
         'value' => [
             ['label' => 'New York', 'value' => 7],
             ['label' => 'Los Angeles', 'value' => 8],
             ['label' => 'Chicago', 'value' => 9]
         ]
     ],
 ]" />

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

When the value and label do not come from the label and value positions respectively, you must specify this manually using the select attribute: 

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

# Disable Options

An option to disable specific options.

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

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

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

# Searchable 

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

# Grouped 

<x-select.styled group :options="[
    [
        'label' => 'Brazil',
        'image' => 'https://placehold.co/15x15/cyan/white',
        'description' => 'Brazil is a country known for being the land of samba.',
        'value' => [
             ['label' => 'São Paulo', 'value' => 4, 'image' => 'https://placehold.co/15x15/orange/white'],
             ['label' => 'Rio de Janeiro', 'value' => 5, 'image' => 'https://placehold.co/15x15/orange/white'],
             ['label' => 'Brasília', 'value' => 6, 'image' => 'https://placehold.co/15x15/orange/white']
        ]
    ],
    [
        'label' => 'United States',
        'image' => 'https://placehold.co/15x15/purple/white',
        'description' => 'The United States is a country known for being the land of opportunity.',
        'value' => [
            ['label' => 'New York', 'value' => 7, 'image' => 'https://placehold.co/15x15/blue/white'],
            ['label' => 'Los Angeles', 'value' => 8, 'image' => 'https://placehold.co/15x15/blue/white'],
            ['label' => 'Chicago', 'value' => 9, 'image' => 'https://placehold.co/15x15/blue/white']
        ]
    ],
]" />

# 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 

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