Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Icewall
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
John Travolta
johntravolta@left4code.com
Will Smith
willsmith@left4code.com
Leonardo DiCaprio
leonardodicaprio@left4code.com
Angelina Jolie
angelinajolie@left4code.com
Products
Oppo Find X2 Pro
Smartphone & Tablet
Nikon Z6
Photography
Nike Air Max 270
Sport & Outdoor
Sony A7 III
Photography

## Tom Select

## Basic Select

Show example code
Basic
Nested

                    HTMLOpenTag!-- BEGIN: Basic Select --HTMLCloseTag
                                HTMLOpenTagdivHTMLCloseTag
                                    HTMLOpenTaglabelHTMLCloseTagBasicHTMLOpenTag/labelHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                        HTMLOpenTagselect data-placeholder="Select your favorite actors" class="tom-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-placeholder="Select your favorite actors" class="tom-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="6"HTMLCloseTagScarlett JohanssonHTMLOpenTag/optionHTMLCloseTag
                                                HTMLOpenTagoption value="7"HTMLCloseTagJessica AlbaHTMLOpenTag/optionHTMLCloseTag
                                                HTMLOpenTagoption value="8"HTMLCloseTagJennifer LawrenceHTMLOpenTag/optionHTMLCloseTag
                                                HTMLOpenTagoption value="9"HTMLCloseTagEmma StoneHTMLOpenTag/optionHTMLCloseTag
                                                HTMLOpenTagoption value="10"HTMLCloseTagAngelina JolieHTMLOpenTag/optionHTMLCloseTag
                                            HTMLOpenTag/optgroupHTMLCloseTag
    HTMLOpenTag/selectHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag!-- END: Nested Select --HTMLCloseTag

## Multiple Select

Show example code

                    HTMLOpenTagselect data-placeholder="Select your favorite actors" multiple="multiple" class="tom-select w-full"HTMLCloseTag
        HTMLOpenTagoption
                                        value="1"
                                        selected
                                    HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoption value="2"HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoption
                                        value="3"
                                        selected
                                    HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoption value="5"HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
    HTMLOpenTag/selectHTMLCloseTag

## Header

Show example code

                    HTMLOpenTagselect data-placeholder="Select your favorite actors" data-header="Actors" multiple="multiple" class="tom-select w-full"HTMLCloseTag
        HTMLOpenTagoption value="1"HTMLCloseTagLeonardo DiCaprioHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoption
                                        value="2"
                                        selected
                                    HTMLCloseTagJohnny DeepHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoption
                                        value="3"
                                        selected
                                    HTMLCloseTagRobert Downey, JrHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoption value="4"HTMLCloseTagSamuel L. JacksonHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoption
                                        value="5"
                                        selected
                                    HTMLCloseTagMorgan FreemanHTMLOpenTag/optionHTMLCloseTag
    HTMLOpenTag/selectHTMLCloseTag

## Input Group

Show example code
@

                    HTMLOpenTagdiv class="flex"HTMLCloseTag
                                    HTMLOpenTagdiv class="flex"HTMLCloseTag
                                        HTMLOpenTagdiv
                                            class="z-30 -mr-1 flex w-10 items-center justify-center rounded-l border bg-slate-100 text-slate-600 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400"HTMLCloseTag
                                            @
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagselect class="tom-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

## Disabled

Show example code

                    HTMLOpenTagselect disabled="disabled" class="tom-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

## Disabled Option

Show example code

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