Input Select

Input select component.

Form Input Select, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->form('input.select')
    ->block('block', 'classes');

# Concept

The Input Select component is a combination of the normal input component with select.native or select.styled components. This combination allows you to create more complex and feature-rich select inputs, with the possibility of adding icons, prefixes, suffixes, hints and more. All available options of each component are still available when using the Input Select component, so you can mix and match the features of both components to create the perfect select input for your application.

One of the position is mandatory for the input select component, either left or right.

# Select Native

Phone Number

<x-input.select label="Phone Number" icon="phone" clearable>
    <x-slot:left>
        <x-select.native :options="['+1', '+44', '+55', '+91']" />
    </x-slot:left>
</x-input.select>

# Select Styled

E-mail Provider

<x-input.select label="E-mail Provider" icon="envelope" clearable>
    <x-slot:right>
        <x-select.styled :options="['@gmail.com', '@yahoo.com', '@outlook.com']" />
    </x-slot:right>
</x-input.select>