<div> <label>Basic</label> <div class="mt-2"> <TailSelect v-model="select" :options="{ search: true, classNames: 'w-full' }" > <option value="1">Leonardo DiCaprio</option> <option value="2">Johnny Deep</option> <option value="3">Robert Downey, Jr</option> <option value="4">Samuel L. Jackson</option> <option value="5">Morgan Freeman</option> </TailSelect> </div> </div> <div class="mt-3"> <label>Nested</label> <div class="mt-2"> <TailSelect v-model="select" :options="{ search: true, classNames: 'w-full' }" > <optgroup label="American Actors"> <option value="1">Leonardo DiCaprio</option> <option value="2">Johnny Deep</option> <option value="3">Robert Downey, Jr</option> <option value="4">Samuel L. Jackson</option> <option value="5">Morgan Freeman</option> </optgroup> <optgroup label="American Actresses"> <option value="6">Scarlett Johansson</option> <option value="7">Jessica Alba</option> <option value="8">Jennifer Lawrence</option> <option value="9">Emma Stone</option> <option value="10">Angelina Jolie</option> </optgroup> </TailSelect> </div> </div>
<TailSelect v-model="select" :options="{ search: true, descriptions: true, hideSelected: true, hideDisabled: true, multiLimit: 15, multiShowCount: false, multiContainer: true, classNames: 'w-full' }" multiple > <option value="1">Leonardo DiCaprio</option> <option value="2">Johnny Deep</option> <option value="3">Robert Downey, Jr</option> <option value="4">Samuel L. Jackson</option> <option value="5">Morgan Freeman</option> </TailSelect>
<div class="flex"> <div class="z-30 rounded-l w-10 flex items-center justify-center bg-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4 -mr-1" > @ </div> <TailSelect v-model="select" :options="{ search: true, classNames: 'w-full' }" > <option value="1">Leonardo DiCaprio</option> <option value="2">Johnny Deep</option> <option value="3">Robert Downey, Jr</option> <option value="4">Samuel L. Jackson</option> <option value="5">Morgan Freeman</option> </TailSelect> </div>
<TailSelect v-model="select" :options="{ classNames: 'w-full' }" > <option value="1">Leonardo DiCaprio</option> <option value="2">Johnny Deep</option> <option value="3">Robert Downey, Jr</option> <option value="4">Samuel L. Jackson</option> <option value="5">Morgan Freeman</option> </TailSelect>