Tailwind CSS Select - Taco Vue

Use our Tailwind CSS Select component to collect user provided information from a list of options. 

<Select :options="defaultOptionSelect" label="Select Version" color="blue"/>

Select Variants

The Select component comes with 3 different variants that you can change it using the variant prop. 

<Select :options="defaultOptionSelect" label="Select Version" color="blue" variant="outlined"/>
<Select :options="defaultOptionSelect" label="Select Version" color="blue" variant="standard"/>
<Select :options="defaultOptionSelect" label="Select Version" color="blue" variant="static"/>

Select Sizes

The Select component comes with 2 different sizes that you can change it using the size prop. 

<Select :options="defaultOptionSelect" label="Select Version" color="blue" size="md"/>
<Select :options="defaultOptionSelect" label="Select Version" color="blue" size="lg"/>

Select Colors

The Select component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

<Select :options="defaultOptionSelect" label="Select Version" color="blue"/>
<Select :options="defaultOptionSelect" label="Select Version" color="purple"/>
<Select :options="defaultOptionSelect" label="Select Version" color="teal"/>

Select Validations

The Select component comes with error and success states for performing validations. 

<Select :options="defaultOptionSelect" label="Select Version" error/>
<Select :options="defaultOptionSelect" label="Select Version" success/>

Select Animation

You can modify the open/close state animation for Select component using the animate prop. 

<Select :options="defaultOptionSelect" label="Select Version" color="blue" animation/>

Disabled Select

A Select could be disabled as well, it will help you to prevent user interactions like click or focus over the Select component. 

<Select :options="defaultOptionSelect" label="Select Version" disabled/>

Custom Select 

<Select 
    v-model="selectStatus"
    :options="optionSelect"
    label=""
    color="Select type"
    :error="false"
    :success="false"
    variant="outlined"
    size="md"
    :animation="false"
>
</Select>