Searchable Select Field

The searchable-select-field component provides a searchable dropdown input with customizable sizes, states, and styling.

Installation

pnpm

pnpm i @vue-interface/searchable-select-field

yarn

yarn add @vue-interface/searchable-select-field

npm

npm i @vue-interface/searchable-select-field

bun

bun i @vue-interface/searchable-select-field

Tailwind Setup

@import '@vue-interface/searchable-select-field/index.css';

Basic Usage

The searchable-select-field requires an options prop array.

<SearchableSelectField v-model="selected" :options="languages"></SearchableSelectField>

Variations and States

Placeholder

Descriptive Text Field

Readonly

Disabled

Disabled (Placeholder)

Show Code

<SearchableSelectField :options="options" placeholder="Type to search..." label="Placeholder"></SearchableSelectField>
<SearchableSelectField :options="options" label="Descriptive Text Field" help-text="Some helpful text goes here."></SearchableSelectField>
<SearchableSelectField :options="options" label="Readonly" placeholder="Type something here..." readonly></SearchableSelectField>
<SearchableSelectField :options="options" label="Disabled" disabled></SearchableSelectField>
<SearchableSelectField :options="options" placeholder="Disabled" label="Disabled (Placeholder)" disabled></SearchableSelectField>

Sizes

Customize the size using predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes

The size can be customized using predetermined size prop values: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: form-control-[size].

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

Show Code

<SearchableSelectField :options="options" label="xs" size="form-control-xs"></SearchableSelectField>
<SearchableSelectField :options="options" label="sm" size="form-control-sm"></SearchableSelectField>
<SearchableSelectField :options="options" label="md" size="form-control-md"></SearchableSelectField>
<SearchableSelectField :options="options" label="lg" size="form-control-lg"></SearchableSelectField>
<SearchableSelectField :options="options" label="xl" size="form-control-xl"></SearchableSelectField>
<SearchableSelectField :options="options" label="2xl" size="form-control-2xl"></SearchableSelectField>
<SearchableSelectField :options="options" label="3xl" size="form-control-3xl"></SearchableSelectField>
<SearchableSelectField :options="options" label="4xl" size="form-control-4xl"></SearchableSelectField>
<SearchableSelectField :options="options" label="5xl" size="form-control-5xl"></SearchableSelectField>

Tailwind Sizes

For more granular control over sizes, use Tailwind's numeric sizing scale classes: form-control-1 - form-control-96

form-control-3

form-control-3.5

form-control-4

form-control-5

Show Code

<SearchableSelectField :options="options" label="form-control-3" size="form-control-3"></SearchableSelectField>
<SearchableSelectField :options="options" label="form-control-3.5" size="form-control-3.5"></SearchableSelectField>
<SearchableSelectField :options="options" label="form-control-4" size="form-control-4"></SearchableSelectField>
<SearchableSelectField :options="options" label="form-control-5" size="form-control-5"></SearchableSelectField>

Arbitrary Sizes

For precise sizing, specify exact pixel values using the syntax form-control-[Npx] or any other CSS length units (rem, em, mm, etc.).

form-control-[16px]

form-control-[1.5rem]

Show Code

<SearchableSelectField :options="options" label="form-control-[16px]" size="form-control-[16px]"></SearchableSelectField>
<SearchableSelectField :options="options" label="form-control-[1.5rem]" size="form-control-[1.5rem]"></SearchableSelectField>

Icons

The following searchable-select-field components combine the an input field with a heroicon. Customize the size of searchable-select-field/icon combinations using the same sizing prop values described above.

import { CalendarDaysIcon } from '@heroicons/vue/24/outline';

<SearchableSelectField :options="options">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>

Show Code

<SearchableSelectField :options="options" size="form-control-xs" placeholder="XS Icon">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-sm" placeholder="SM Icon">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-lg" placeholder="Large Icon">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-xl" placeholder="XL Icon">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-2xl" placeholder="2xl Icon">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-3xl" placeholder="3xl Icon">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-4xl" placeholder="4xl Icon">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-5xl" placeholder="5xl Icon">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-4" placeholder="form-control-4">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-4.5" placeholder="form-control-4.5">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-[16px]" placeholder="form-control-[16px]">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField :options="options" size="form-control-[1.5rem]" placeholder="form-control-[1.5rem]">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>

Validation

Validation classes provide error-checking styling. The invalid-feedback and valid-feedback classes provide the styling for invalid and valid elements, respectively.

Empty Array of Errors

Single Inline Error

This is an inline error.

Array of Errors

First Error

Second Error

Multiple Errors From Object

This is an inline error #1.

This is an inline error #2.

Valid Field

Valid Field with Feedback

This is some success message.

Valid Field with Array of Feedback

This is some success message.

This is some success message.

Show Code

<SearchableSelectField :options="options" label="Empty Array of Errors" :errors="[]"></SearchableSelectField>
<SearchableSelectField :options="options" invalid label="Single Inline Error" error="This is an inline error." class="invalid-feedback"></SearchableSelectField>
<SearchableSelectField :options="options" invalid label="Array of Errors" :errors="['First Error', 'Second Error']" class="invalid-feedback"></SearchableSelectField>
<SearchableSelectField :options="options" invalid label="Multiple Errors From Object" :errors="['This is an inline error #1.', 'This is an inline error #2.']" class="invalid-feedback"></SearchableSelectField>
<SearchableSelectField :options="options" valid label="Valid Field" class="valid-feedback"></SearchableSelectField>
<SearchableSelectField :options="options" valid label="Valid Field with Feedback" feedback="This is some success message." class="valid-feedback"></SearchableSelectField>
<SearchableSelectField :options="options" valid label="Valid Field with Array of Feedback" :feedback="['This is some success message.', 'This is some success message.']" class="valid-feedback"></SearchableSelectField>

Custom Colors

Customize the color of a searchable-select-field component with the Tailwind color palette by using the color prop: form-control-[color].

Show Code

<SearchableSelectField :options="options" color="form-control-amber-500" placeholder="form-control-amber-500"></SearchableSelectField>
<SearchableSelectField :options="options" color="form-control-green-500" placeholder="form-control-green-500"></SearchableSelectField>
<SearchableSelectField :options="options" color="form-control-purple-500" placeholder="form-control-purple-500"></SearchableSelectField>
<SearchableSelectField :options="options" color="form-control-neutral-500" placeholder="form-control-neutral-500"></SearchableSelectField>

Animated

The searchable-select-field animated component combines the tailwind form-control-animated classes to provide a custom animated component. Customize the size of animated searchable-select-field/icon combinations using the same sizing prop values described above.

Animated

Animated

Animated

Show Code

<SearchableSelectField 
    :options="options" 
    label="Animated" 
    placeholder="Some placeholder" 
    size="form-control-sm" 
    class="form-control-animated-sm">
</SearchableSelectField>
<SearchableSelectField 
    :options="options" 
    label="Animated" 
    placeholder="Some placeholder" 
    size="form-control-md" 
    class="form-control-animated-md">
</SearchableSelectField>
<SearchableSelectField 
    :options="options" 
    label="Animated" 
    placeholder="Some placeholder" 
    size="form-control-lg" 
    class="form-control-animated-lg">
</SearchableSelectField>

With Icons

Add an icon to the animated searchable-select-fields using the steps described above.

Animated with Icon

Animated with Icon

Animated with Icon

Show Code

<SearchableSelectField 
    :options="options" 
    label="Animated with Icon" 
    placeholder="Some placeholder" 
    size="form-control-sm" 
    class="form-control-animated-sm">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField 
    :options="options" 
    label="Animated with Icon" 
    placeholder="Some placeholder" 
    size="form-control-md" 
    class="form-control-animated-md">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>
<SearchableSelectField 
    :options="options" 
    label="Animated with Icon" 
    placeholder="Some placeholder" 
    size="form-control-lg" 
    class="form-control-animated-lg">
    <template #icon>
        <CalendarDaysIcon />
    </template>
</SearchableSelectField>