search results:

    • Standard
    • React
    License Free hosting Learn Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Select

    Tailwind CSS Select

    Use responsive select dropdown component with helper examples for select input, multi select, select box, search with select, select options, styling& more.

    Required ES init: Select *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using Tailwind Elements ES format then you should pass the required components to the initTE method.

    Basic example

    The Select component is most useful for gathering information provided by the user from a list of options. Basic select component allows you to choose from a number of options.

    • HTML
    • javascript
            
                
          <select data-te-select-init>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    Multiselect

    Add multiple attribute to the select element to activate multiple mode.

    • HTML
    • javascript
            
                
          <select data-te-select-init multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
          </select>
          <label data-te-select-label-ref>Example label</label>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Select with label

    You can add select label by adding data-te-select-label-ref attribute to the label element. Select and label should be wrapped in a container.

    • HTML
    • javascript
            
                
          <select data-te-select-init>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          <label data-te-select-label-ref>Example label</label>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Select with placeholder

    Use data-te-select-placeholder attribute to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected.

    • HTML
    • javascript
            
                
          <select
            data-te-select-init
            data-te-select-placeholder="Example placeholder"
            multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Size

    Change the size of select input by changing the value of data-te-select-size attribute.

    • HTML
    • javascript
            
                
          <!--Select small-->
          <select data-te-select-init data-te-select-size="sm">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          <label data-te-select-label-ref>Size sm</label>
    
          <!--Select default-->
          <select data-te-select-init>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          <label data-te-select-label-ref>Size default</label>
    
          <!--Select large-->
          <select data-te-select-init data-te-select-size="lg">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          <label data-te-select-label-ref>Size lg</label>
    
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Disabled select

    Add disabled attribute to the select element to disable select input.

    • HTML
    • javascript
            
                
          <select data-te-select-init disabled>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Disabled options

    Use disabled attribute on option element to disable specific option.

    • HTML
    • javascript
            
                
          <select data-te-select-init>
            <option value="1">One</option>
            <option value="2" disabled>Two</option>
            <option value="3" disabled>Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Clear button

    Set data-te-select-clear-button option to true to display the button that will allow to clear current selections.

    • HTML
    • javascript
            
                
          <select data-te-select-init data-te-select-clear-button="true">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Custom content

    A custom content container with a class data-te-select-custom-content-ref will be displayed at the end of the select dropdown.

    • HTML
    • javascript
            
                
          <select data-te-select-init>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
    
          <div class="p-4" data-te-select-custom-content-ref>
            <button
              class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
              data-te-ripple-init
              data-te-ripple-color="white">
              Save
            </button>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, Ripple, initTE } from "tw-elements";
          initTE({ Select, Ripple });
          
            
        

    Visible options

    Use data-te-select-visible-options option to change the number of options that will be displayed in the select dropdown without scrolling.

    • HTML
    • javascript
            
                
          <select data-te-select-init data-te-select-visible-options="3">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Secondary text

    Add data-te-select-secondary-text data attribute to the specific options to display secondary text.

    • HTML
    • javascript
            
                
          <select data-te-select-init data-te-select-option-height="52">
            <option value="1" data-te-select-secondary-text="Secondary text">
              One
            </option>
            <option value="2" data-te-select-secondary-text="Secondary text">
              Two
            </option>
            <option value="3" data-te-select-secondary-text="Secondary text">
              Three
            </option>
            <option value="4" data-te-select-secondary-text="Secondary text">
              Four
            </option>
            <option value="5" data-te-select-secondary-text="Secondary text">
              Five
            </option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Search

    Set data-te-select-filter option to true to enable options filtering.

    • HTML
    • javascript
            
                
          <select data-te-select-init data-te-select-filter="true">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
            <option value="9">Nine</option>
            <option value="10">Ten</option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Select with search inside a modal

    Due to a focus trap in modals, it is not possible to focus the outer elements (like select dropdown). You can use select data-te-select-container option to resolve this problem.

    The data-te-select-container accepts selector of the element inside of wich select dropdown will be rendered. In this case, the selector should point to the modal container (the element with attribute data-te-modal-init). It is important to use a unique selector to assign select to a specific modal.

    Modal title
    • HTML
    • javascript
            
                
          <!-- Button trigger modal -->
          <button
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
            data-te-toggle="modal"
            data-te-target="#exampleModal"
            data-te-ripple-init
            data-te-ripple-color="light">
            Launch demo modal
          </button>
    
          <!-- Modal -->
          <div
            data-te-modal-dialog-ref
            class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]">
            <div
              class="min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)] pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-zinc-600">
              <div
                class="min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)] pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-700">
                <div
                  class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50">
                  <h5
                    class="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200"
                    id="exampleModalLabel">
                    Modal title
                  </h5>
                  <button
                    type="button"
                    class="-my-2 -mr-2 ml-auto box-content h-4 w-4 rounded-none border-none p-2 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                    data-te-modal-dismiss
                    aria-label="Close">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 16 16"
                      fill="currentColor">
                      <path
                        d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z" />
                    </svg>
                  </button>
                </div>
                <div class="relative flex-auto p-4" data-te-modal-body-ref>
                  <select
                    data-te-select-init
                    data-te-container="#exampleModal"
                    data-te-select-filter="true">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    <option value="4">Four</option>
                    <option value="5">Five</option>
                    <option value="6">Six</option>
                    <option value="7">Seven</option>
                    <option value="8">Eight</option>
                    <option value="9">Nine</option>
                    <option value="10">Ten</option>
                  </select>
                </div>
                <div
                  class="flex flex-shrink-0 flex-wrap items-center justify-end border-t-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50">
                  <button
                    type="button"
                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                    data-te-modal-dismiss
                    data-te-ripple-init
                    data-te-ripple-color="light">
                    Close
                  </button>
                  <button
                    type="button"
                    class="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                    data-te-ripple-init
                    data-te-ripple-color="light">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, Ripple, Modal, initTE } from "tw-elements";
          initTE({ Select, Ripple, Modal });
          
            
        

    Option groups

    It is possible to group options by using optgroup element.

    • HTML
    • javascript
            
                
          <select data-te-select-init>
            <optgroup label="Label 1">
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </optgroup>
            <optgroup label="Label 2">
              <option value="4">Four</option>
              <option value="5">Five</option>
              <option value="6">Six</option>
            </optgroup>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Select with icons

    Add data-te-select-icon data attribute to the specific options to display the option icon.

    • HTML
    • javascript
            
                
          <select data-te-select-init>
            <option
              value="1"
              data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp">
              One
            </option>
            <option
              value="2"
              data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp">
              Two
            </option>
            <option
              value="3"
              data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp">
              Three
            </option>
            <option
              value="4"
              data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp">
              Four
            </option>
            <option
              value="5"
              data-te-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp">
              Five
            </option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Set value

    The setValue method allows to programatically set the component selections.

    Single selection

    Add single value string to the arguments list to correctly select option with corresponding value in single selection mode.

    • HTML
    • javascript
    • umd
            
                
          <select id="singleSelection" data-te-select-init>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          
            
        
            
                
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
    
          const singleSelect = document.querySelector("#singleSelection");
          const singleSelectInstance = Select.getInstance(singleSelect);
          singleSelectInstance.setValue("4");
          
            
        
            
                
          const singleSelect = document.querySelector("#singleSelection");
          const singleSelectInstance = te.Select.getInstance(singleSelect);
          singleSelectInstance.setValue("4");
          
            
        

    Multi selection

    Add array of string values to the arguments list to correctly select option with corresponding value in multi selection mode.

    • HTML
    • javascript
    • umd
            
                
          <select id="multiSelection" data-te-select-init multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          
            
        
            
                
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
    
          const multiSelect = document.querySelector("#multiSelection");
          const multiSelectInstance = Select.getInstance(multiSelect);
          multiSelectInstance.setValue(["3", "4", "5"]);
          
            
        
            
                           
          const multiSelect = document.querySelector("#multiSelection");
          const multiSelectInstance = te.Select.getInstance(multiSelect);
          multiSelectInstance.setValue(["3", "4", "5"]);
          
            
        

    Select with toggle element

    If you want to toggle Select via button, you have to add data-te-select-toggle attribute to this button with ID of the Select element.

    • HTML
    • javascript
    • umd
            
                
          <select data-te-select-init multiple id="mySelect">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
    
          <button
            id="toggleMySelect"
            class="mt-4 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
            data-te-select-toggle="mySelect">
            Toggle Select
          </button>
          
            
        
            
                
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
    
          const selectEl = document.getElementById("mySelect");
          const select = Select.getInstance(selectEl);
    
          document.getElementById("toggleMySelect").onclick = function () {
            select.open();
          };
          
            
        
            
                
          const selectEl = document.getElementById("mySelect");
          const select = te.Select.getInstance(selectEl);
    
          document.getElementById("toggleMySelect").onclick = function () {
            select.open();
          };
          
            
        

    Auto select

    Set autoSelect option to data-te-select-auto-select to enable selecting on Tab press.

    • HTML
    • javascript
            
                
          <select data-te-select-init data-te-select-auto-select="true">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
          </select>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Hidden selected option

    Add the first option with the hidden and selected attributes and an empty value to leave select with no selection.

    • HTML
    • javascript
            
                
          <select data-te-select-init>
            <option value="" hidden selected></option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
          </select>
          <label data-te-select-label-ref>Example label</label>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Select with CSS classes

    In order to use select with additional CSS classes you need to place it in the div wrapper and use CSS classes on that div.

    • HTML
    • javascript
            
                
          <div class="mb-3 shadow-xl xl:w-96">
            <select data-te-select-init>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="4">Four</option>
              <option value="5">Five</option>
              <option value="6">Six</option>
              <option value="7">Seven</option>
              <option value="8">Eight</option>
            </select>
            <label data-te-select-label-ref>Example label</label>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import { Select, initTE } from "tw-elements";
          initTE({ Select });
          
            
        

    Related resources

    Tutorials:

    spacing utility first rounded corners lists sizing inputs forms

    Extended Docs:

    hover effects icons mega menu navbar offcanvas scrollspy buttons cards dropdown listgroup modal datepicker file input form templates inputs login form registration form search timepicker borders center grid items dark theme display flex position spacing

    Design System (Figma):

    introduction art of prioritization de emphasize with no mercy lowering contrast beyond borders let it breathe user experience do not start with the roof secondary questions project personality design system principles tips and tricks
    • Basic example
    • Multiselect
    • Select with label
    • Select with placeholder
    • Size
    • Disabled select
    • Disabled options
    • Clear button
    • Custom content
    • Visible options
    • Secondary text
    • Search
    • Select with search inside a modal
    • Option groups
    • Select with icons
    • Set value
    • Select with toggle element
    • Auto select
    • Hidden selected option
    • Select with CSS classes
    • Related resources

    Select - API


    Import

    Importing components depends on how your application works. If you intend to use the Tailwind Elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { Select, initTE } from "tw-elements";
            initTE({ Select });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    Elements with the data-te-select-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call the initTE method.

    • HTML
            
                
            <select data-te-select-init>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="4">Four</option>
              <option value="5">Five</option>
            </select>
            
            
        

    Via JavaScript

    You can access an instance from your Javascript code, by using the getInstance static method of the Select class - it allows making use of all the public methods listed in the Methods section.

    • javascript
    • umd
            
                
            const singleSelect = document.querySelector("#singleSelection");
            const singleSelectInstance = Select.getInstance(singleSelect);
            singleSelectInstance.setValue("4");
            
            
        
            
                
            const singleSelect = document.querySelector("#singleSelection");
            const singleSelectInstance = te.Select.getInstance(singleSelect);
            singleSelectInstance.setValue("4");
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-select, as in data-te-select-size="lg".

    Name Type Default Description
    disabled Boolean false Changes select input state to disabled
    multiple Boolean false Allows to select multiple values
    selectAll Boolean true Displays select all option in multiselect dropdown
    selectAllLabel String "Select all" Changes label of select all option.
    selectAutoSelect Boolean true Enables auto selecting on Tab press
    selectContainer String "body" Container for the select dropdown. Accepts an element selector inside of which select dropdown will be rendered.
    selectClearButton Boolean false Adds clear button to the select input.
    selectDisplayedLabels Number 5 The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead. If set to -1, the limit is off.
    selectFilter Boolean false Displays filter input that allow to search for specific option.
    selectFilterDebounce Number 300 Adds delay to the options list updates when using filter input. Improves performance of the select with filter.
    selectFormWhite Boolean false Adjust input colors for dark backgrounds.
    selectNoResultText String "No results" The text that will be displayed when no option is found after using select filter
    selectOptionsSelectedLabel String "options selected" The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected.
    selectOptionHeight Number 38 Height of the select option. Used to determine dropdown height and number of visible options.
    selectPlaceholder String - The text that will be displayed as select input placeholder
    selectSearchPlaceholder String "Search..." Changes placeholder of the select search input.
    selectSize String "default" Changes input size. Available options: 'sm', 'lg', 'default'.
    selectValidation Boolean false Adds required validation to the component.
    selectValidFeedback String "Valid" The text which is displayed below the Material Select when the validate option is enabled and the select is valid.
    selectInvalidFeedback String "Invalid" The text which is displayed below the Material Select when the validate option is enabled and the select is invalid.
    selectVisibleOptions Number 5 The maximum number of options which are visible in the select dropdown without scrolling.

    Classes

    Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-te-class, as in data-te-class-form-outline="relative bg-red-600"

    Note: To apply styling to an input element, you can utilize the identical classes as those available in the Inputs API.
    Name Default Description
    dropdown relative outline-none min-w-[100px] m-0 scale-[0.8] opacity-0 bg-white shadow-[0_2px_5px_0_rgba(0,0,0,0.16),_0_2px_10px_0_rgba(0,0,0,0.12)] transition duration-200 motion-reduce:transition-none data-[te-select-open]:scale-100 data-[te-select-open]:opacity-100 dark:bg-zinc-700 Sets transition, size and appearance styles for select dropdown.
    formCheckInput relative float-left mt-[3px] mr-2 h-4 w-4 cursor-pointer appearance-none rounded-sm border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200 motion-reduce:transition-none checked:border-blue-600 checked:bg-blue-600 checked:after:absolute checked:after:ml-[5px] checked:after:mt-px checked:after:block checked:after:h-[9px] checked:after:w-[5px] checked:after:rotate-45 checked:after:border-2 checked:after:border-t-0 checked:after:border-l-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] focus:outline-none group-data-[te-select-option-text-ref]:mr-2.5 dark:bg-zinc-700 dark:checked:bg-blue-500 Sets styles for checkbox input inside the select dropdown.
    formOutline relative Sets position attribute form select input wrapper.
    initialized hidden Hides original select input
    inputGroup flex items-center whitespace-nowrap p-2.5 text-center text-base font-normal leading-[1.6] text-gray-700 dark:bg-zinc-800 dark:text-gray-200 dark:placeholder:text-gray-200 Sets size, position and other styles for input group wrapper.
    noResult flex items-center px-4 Sets position and padding of no-result information when filtering options.
    optionsList list-none m-0 p-0 Sets margins and paddings for option list.
    optionsWrapper overflow-y-auto Sets overflow for options wrapper element.
    optionsWrapperScrollbar [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-button]:block [&::-webkit-scrollbar-button]:h-0 [&::-webkit-scrollbar-button]:bg-transparent [&::-webkit-scrollbar-track-piece]:bg-transparent [&::-webkit-scrollbar-track-piece]:rounded-none [&::-webkit-scrollbar-track-piece]: [&::-webkit-scrollbar-track-piece]:rounded-l [&::-webkit-scrollbar-thumb]:h-[50px] [&::-webkit-scrollbar-thumb]:bg-[#999] [&::-webkit-scrollbar-thumb]:rounded Changes the default scrollbar appearance.
    selectArrow absolute right-3 text-[0.8rem] cursor-pointer peer-focus:text-primary peer-data-[te-input-focused]:text-primary group-data-[te-was-validated]/validation:peer-valid:text-green-600 group-data-[te-was-validated]/validation:peer-invalid:text-[rgb(220,76,100)] w-5 h-5 Sets styles for select input arrow.
    selectArrowWhite text-gray-50 peer-focus:!text-white peer-data-[te-input-focused]:!text-white Sets arrow color for selectFormWhite attribute.
    selectArrowDefault top-2 Sets arrows top position if select size is default
    selectArrowLg top-[13px] Sets arrows top position if select size is set to large
    selectArrowSm top-1 Sets arrows top position if select size is set to small
    selectClearBtn absolute top-2 right-9 text-black cursor-pointer focus:text-blue-600 outline-none dark:text-gray-200 Sets position, size and other styles for clear button.
    selectClearBtnWhite !text-gray-50 Sets clear button's color for selectFormWhite attribute.
    selectClearBtnDefault top-2 text-base Sets arrows top position and font size if select size is set to default
    selectClearBtnLg top-[11px] text-base Sets arrows top position and font size if select size is set to large.
    selectClearBtnSm top-1 text-[0.8rem] Sets arrows top position and font size if select size is set to small.
    selectDropdownContainer z-[1070] Sets index value for select's dropdown container.
    selectFakeValue transform-none hidden data-[te-input-state-active]:block Sets styles for fake value.
    selectFilterInput relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-gray-300 bg-transparent bg-clip-padding px-3 py-1.5 text-base font-normal text-gray-700 transition duration-300 ease-in-out motion-reduce:transition-none focus:border-blue-600 focus:text-gray-700 focus:shadow-te-blue focus:outline-none dark:text-gray-200 dark:placeholder:text-gray-200 Sets styles for search input appearance.
    selectInput peer block min-h-[auto] w-full rounded border-0 bg-transparent outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-gray-200 dark:placeholder:text-gray-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0 cursor-pointer data-[te-input-disabled]:bg-[#e9ecef] data-[te-input-disabled]:cursor-default group-data-[te-was-validated]/validation:mb-4 dark:data-[te-input-disabled]:bg-zinc-600 Sets styles for select inputs.
    selectInputWhite !text-gray-50 Sets inputs font color for selectFormWhite attribute.
    selectInputSizeDefault py-[0.32rem] px-3 leading-[1.6] Sets padding and line height for default input size.
    selectInputSizeLg py-[0.32rem] px-3 leading-[2.15] Sets padding and line height for large input size.
    selectInputSizeSm py-[0.33rem] px-3 text-xs leading-[1.5] Sets font size, padding and line height for small input size.
    selectLabel pointer-events-none absolute top-0 left-3 mb-0 max-w-[90%] origin-[0_0] truncate text-gray-500 transition-all duration-200 ease-out peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-gray-200 dark:peer-focus:text-gray-200 data-[te-input-state-active]:scale-[0.8] Sets styles for select input label.
    selectLabelWhite !text-gray-50 Sets label color for selectFormWhite attribute.
    selectLabelSizeDefault pt-[0.37rem] leading-[1.6] peer-focus:-translate-y-[0.9rem] peer-data-[te-input-state-active]:-translate-y-[0.9rem] data-[te-input-state-active]:-translate-y-[0.9rem] Sets label styles for default select input size.
    selectLabelSizeLg pt-[0.37rem] leading-[2.15] peer-focus:-translate-y-[1.15rem] peer-data-[te-input-state-active]:-translate-y-[1.15rem] data-[te-input-state-active]:-translate-y-[1.15rem] Sets label styles for large select input size.
    selectLabelSizeSm pt-[0.37rem] text-xs leading-[1.5] peer-focus:-translate-y-[0.75rem] peer-data-[te-input-state-active]:-translate-y-[0.75rem] data-[te-input-state-active]:-translate-y-[0.75rem] Sets label styles for small select input size.
    selectOption flex flex-row items-center justify-between w-full px-4 truncate text-gray-700 bg-transparent select-none cursor-pointer data-[te-input-multiple-active]:bg-black/5 hover:[&:not([data-te-select-option-disabled])]:bg-black/5 data-[te-input-state-active]:bg-black/5 data-[te-select-option-selected]:data-[te-input-state-active]:bg-black/5 data-[te-select-selected]:data-[te-select-option-disabled]:cursor-default data-[te-select-selected]:data-[te-select-option-disabled]:text-gray-400 data-[te-select-selected]:data-[te-select-option-disabled]:bg-transparent data-[te-select-option-selected]:bg-black/[0.02] data-[te-select-option-disabled]:text-gray-400 data-[te-select-option-disabled]:cursor-default group-data-[te-select-option-group-ref]/opt:pl-7 dark:text-gray-200 dark:hover:[&:not([data-te-select-option-disabled])]:bg-white/30 dark:data-[te-input-state-active]:bg-white/30 dark:data-[te-select-option-selected]:data-[te-input-state-active]:bg-white/30 dark:data-[te-select-option-disabled]:text-gray-400 dark:data-[te-input-multiple-active]:bg-white/30 Sets styles for every select options.
    selectOptionGroup group/opt Adds named group class to opt elements.
    selectOptionGroupLabel flex flex-row items-center w-full px-4 truncate bg-transparent text-black/50 select-none dark:text-gray-300 Sets styles for opt group labels.
    selectOptionIcon w-7 h-7 rounded-full Sets size and border radius for icons.
    selectOptionSecondaryText block text-[0.8rem] text-gray-500 dark:text-gray-300 Sets font size, colors and other styles for secondary text.
    selectOptionText group Adds group class to option text.
    selectValidationValid hidden absolute -mt-3 w-auto text-sm text-green-600 cursor-pointer group-data-[te-was-validated]/validation:peer-valid:block Sets styles for valid feedback information.
    selectValidationInvalid hidden absolute -mt-3 w-auto text-sm text-[rgb(220,76,100)] cursor-pointer group-data-[te-was-validated]/validation:peer-invalid:block Sets styles for invalid feedback information.
    • javascript
    • umd
            
                
            new Select(
              document.querySelector("#select"),
              {},
              {
                selectOptionIcon: "w-7 h-7 rounded-full",
              }
            );
            
            
        
            
                
              new te.Select(
                document.querySelector("#select"),
                {},
                {
                  selectOptionIcon: "w-7 h-7 rounded-full",
                }
              );
            
            
        

    Methods

    Asynchronous methods and transitions:
    All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

    Method Description Example
    open Manually opens a select mySelect.open()
    close Manually closes a select mySelect.close()
    setValue Programatically set component selections. Add single value for default select and array of values for multiselect. mySelect.setValue('3')
    dispose Disposes a select instance mySelect.dispose()
    getInstance Static method which allows you to get the select instance associated to a DOM element. Select.getInstance(selectEl)
    getOrCreateInstance Static method which returns the select instance associated to a DOM element or create a new one in case it wasn't initialized. Select.getOrCreateInstance(selectEl)
    • javascript
    • umd
            
                
            const selectEl = document.getElementById('mySelect');
            const select = new Select(selectEl);
            select.open();
            
            
        
            
                
            const selectEl = document.getElementById('mySelect');
            const select = new te.Select(selectEl);
            select.open();
            
            
        

    Events

    Event type Description
    open.te.select This event fires immediately when the select is opened.
    close.te.select This event fires immediately when the select is closed.
    valueChange.te.select This event fires immediately when the select value changes.
    optionSelect.te.select This event fires immediately when the select option is selected.
    optionDeselect.te.select This event fires immediately when the select option is deselected.
    • JavaScript
            
                
            const mySelect = document.getElementById('mySelect');
            mySelect.addEventListener('open.te.select', (e) => {
              // do something...
            });
            
            
        
    • Import
    • Usage
    • Options
    • Classes
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com