Input Select

Input select component.

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

# Readonly & Disabled

Readonly

Disabled

Readonly

Disabled

<x-input.select label="Readonly" value="555-0100" readonly>
    <x-slot:left>
        <x-select.native :options="['+1', '+44']" readonly />
    </x-slot>
</x-input.select>
<x-input.select label="Disabled" value="555-0100" disabled>
    <x-slot:right>
        <x-select.native :options="['+1', '+44']" disabled />
    </x-slot>
</x-input.select>
<x-input.select label="Readonly" value="555-0100" readonly>
    <x-slot:left>
        <x-select.styled value="+1" :options="['+1', '+44']" readonly />
    </x-slot>
</x-input.select>
<x-input.select label="Disabled" value="555-0100" disabled>
    <x-slot:right>
        <x-select.styled value="+1" :options="['+1', '+44']" disabled />
    </x-slot>
</x-input.select>

# Panel Width

An option to control the width of the floating.