Tail Select

Pages

Users

Brad Pitt

bradpitt@left4code.com

Russell Crowe

russellcrowe@left4code.com

Brad Pitt

bradpitt@left4code.com

Angelina Jolie

angelinajolie@left4code.com

Products

Samsung Galaxy S20 Ultra

Smartphone & Tablet

Nike Tanjun

Sport & Outdoor

Basic Select

Show example code

Basic

Nested

  HTMLOpenTag!-- BEGIN: Basic Select --HTMLCloseTag HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagBasicHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagselect data-search="true" class="tail-select w-full"HTMLCloseTag HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Basic Select --HTMLCloseTag HTMLOpenTag!-- BEGIN: Nested Select --HTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagNestedHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagselect data-search="true" class="tail-select w-full"HTMLCloseTag HTMLOpenTagoptgroup label="American Actors"HTMLCloseTag HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/optgroupHTMLCloseTag HTMLOpenTagoptgroup label="American Actresses"HTMLCloseTag HTMLOpenTagoption value="1"HTMLCloseTagScarlett JohanssonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="2"HTMLCloseTagJessica AlbaHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="3"HTMLCloseTagJennifer LawrenceHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="4"HTMLCloseTagEmma StoneHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="5"HTMLCloseTagAngelina JolieHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/optgroupHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Nested Select --HTMLCloseTag

Multi Select

Show example code

  HTMLOpenTagselect data-placeholder="Select your favorite actors" data-search="true" class="tail-select w-full" multipleHTMLCloseTag HTMLOpenTagoption value="1" selectedHTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="3" selectedHTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag

Input Group

Show example code

  HTMLOpenTagdiv class="flex"HTMLCloseTag HTMLOpenTagdiv 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"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTagselect data-search="true" class="tail-select w-full"HTMLCloseTag HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Hiding Search Box

Show example code

  HTMLOpenTagselect class="tail-select w-full"HTMLCloseTag HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="3"HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag

Dark Mode