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.

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-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Multiselect

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

Example label

HTML
javascript

        
            
      <select data-twe-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-twe-select-label-ref>Example label</label>

        
            
      // Initialization for ES Users
      import { Select, initTWE } from "tw-elements";
      initTWE({ Select });

Select with label

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

Example label

HTML
javascript

        
            
      <select data-twe-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-twe-select-label-ref>Example label</label>

        
            
      // Initialization for ES Users
      import { Select, initTWE } from "tw-elements";
      initTWE({ Select });

Select with placeholder

Use data-twe-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-twe-select-init
        data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

Size

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

Size sm

Size default

Size lg

HTML
javascript

        
            
      <!--Select small-->
      <select data-twe-select-init data-twe-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-twe-select-label-ref>Size sm</label>

      <!--Select default-->
      <select data-twe-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-twe-select-label-ref>Size default</label>

      <!--Select large-->
      <select data-twe-select-init data-twe-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-twe-select-label-ref>Size lg</label>

        
            
      // Initialization for ES Users
      import { Select, initTWE } from "tw-elements";
      initTWE({ Select });

Disabled select

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

HTML
javascript

        
            
      <select data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

Disabled options

Use disabled attribute on option element to disable specific option.

HTML
javascript

        
            
      <select data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

Clear button

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

HTML
javascript

        
            
      <select data-twe-select-init data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

Custom content

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

HTML
javascript

        
            
      <select data-twe-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-twe-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-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
          data-twe-ripple-init
          data-twe-ripple-color="white">
          Save
        </button>
      </div>

        
            
      // Initialization for ES Users
      import { Select, Ripple, initTWE } from "tw-elements";
      initTWE({ Select, Ripple });

Visible options

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

HTML
javascript

        
            
      <select data-twe-select-init data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

Secondary text

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

HTML
javascript

        
            
      <select data-twe-select-init data-twe-select-option-height="52">
        <option value="1" data-twe-select-secondary-text="Secondary text">
          One
        </option>
        <option value="2" data-twe-select-secondary-text="Secondary text">
          Two
        </option>
        <option value="3" data-twe-select-secondary-text="Secondary text">
          Three
        </option>
        <option value="4" data-twe-select-secondary-text="Secondary text">
          Four
        </option>
        <option value="5" data-twe-select-secondary-text="Secondary text">
          Five
        </option>
      </select>

        
            
      // Initialization for ES Users
      import { Select, initTWE } from "tw-elements";
      initTWE({ Select });

Search

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

HTML
javascript

        
            
      <select data-twe-select-init data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

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

The data-twe-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-twe-modal-init). It is important to use a unique selector to assign select to a specific modal.

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-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-toggle="modal"
        data-twe-target="#exampleModal"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div
        data-twe-modal-init
        class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
        id="exampleModal"
        tabindex="-1"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div
          data-twe-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="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-4 outline-none dark:bg-surface-dark">
            <div
              class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 p-4 dark:border-white/10">
              <h5
                class="text-xl font-medium leading-normal text-surface dark:text-white">
                Modal title
              </h5>
              <button
                type="button"
                class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                data-twe-modal-dismiss
                aria-label="Close">
                <span class="[&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
            <div class="relative flex-auto p-4" data-twe-modal-body-ref>
              <select
                data-twe-select-init
                data-twe-select-container="#exampleModal"
                data-twe-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 rounded-b-md border-t-2 border-neutral-100 p-4 dark:border-white/10">
              <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-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
                data-twe-modal-dismiss
                data-twe-ripple-init
                data-twe-ripple-color="light">
                Close
              </button>
              <button
                type="button"
                class="ms-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                data-twe-ripple-init
                data-twe-ripple-color="light">
                Save changes
              </button>
            </div>
          </div>
        </div>
      </div>

        
            
      // Initialization for ES Users
      import { Select, Ripple, Modal, initTWE } from "tw-elements";
      initTWE({ Select, Ripple, Modal });

Option groups

It is possible to group options by using optgroup element.

HTML
javascript

        
            
      <select data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

Select with icons

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

HTML
javascript

        
            
      <select data-twe-select-init>
        <option
          value="1"
          data-twe-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp">
          One
        </option>
        <option
          value="2"
          data-twe-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp">
          Two
        </option>
        <option
          value="3"
          data-twe-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp">
          Three
        </option>
        <option
          value="4"
          data-twe-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp">
          Four
        </option>
        <option
          value="5"
          data-twe-select-icon="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp">
          Five
        </option>
      </select>

        
            
      // Initialization for ES Users
      import { Select, initTWE } from "tw-elements";
      initTWE({ 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

ES UMD

        
            
      <select id="singleSelection" data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

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

        
            
      const singleSelect = document.querySelector("#singleSelection");
      const singleSelectInstance = twe.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

ES UMD

        
            
      <select id="multiSelection" data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

      const multiSelect = document.querySelector("#multiSelection");
      const multiSelectInstance = Select.getInstance(multiSelect);
      multiSelectInstance.setValue(["3", "4", "5"]);

        
                       
      const multiSelect = document.querySelector("#multiSelection");
      const multiSelectInstance = twe.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-twe-select-toggle attribute to this button with ID of the Select element.

HTML
javascript
umd

ES UMD

        
            
      <select data-twe-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-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-select-toggle="mySelect">
        Toggle Select
      </button>

        
            
      import { Select, initTWE } from "tw-elements";
      initTWE({ 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 = twe.Select.getInstance(selectEl);

      document.getElementById("toggleMySelect").onclick = function () {
        select.open();
      };

Auto select

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

HTML
javascript

        
            
      <select data-twe-select-init data-twe-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, initTWE } from "tw-elements";
      initTWE({ Select });

Hidden selected option

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

Example label

HTML
javascript

        
            
      <select data-twe-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-twe-select-label-ref>Example label</label>

        
            
      // Initialization for ES Users
      import { Select, initTWE } from "tw-elements";
      initTWE({ 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.

Example label

HTML
javascript

        
            
      <div class="mb-3 shadow-xl xl:w-96">
        <select data-twe-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-twe-select-label-ref>Example label</label>
      </div>

        
            
      // Initialization for ES Users
      import { Select, initTWE } from "tw-elements";
      initTWE({ Select });

Import

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

javascript
umd

ES UMD

        
            
        import { Select, initTWE } from "tw-elements";
        initTWE({ Select });

        
            
        import "tw-elements";

Usage

Via data attributes

Elements with the data-twe-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 initTWE method.

HTML

        
            
        <select data-twe-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

ES UMD

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

        
            
        const singleSelect = document.querySelector("#singleSelection");
        const singleSelectInstance = twe.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-twe-select, as in data-twe-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.
`customArrow`	String	`-`	It changes the default arrow icon to the custom one. Pass the `SVG` code.

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-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-y-[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-[twe-select-open]:scale-100 data-[twe-select-open]:opacity-100 dark:bg-surface-dark	Sets transition, size and appearance styles for select dropdown.
`formCheckInput`	relative float-left rtl:float-right me-[8px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent dark:border-neutral-400 dark:bg-body-dark dark:checked:border-primary dark:checked:bg-primary	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-surface-dark dark:text-white	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-s [&::-webkit-scrollbar-thumb]:h-[50px] [&::-webkit-scrollbar-thumb]:bg-[#999] [&::-webkit-scrollbar-thumb]:rounded [&::-webkit-scrollbar-thumb]:dark:bg-gray-200	Changes the default scrollbar appearance.
`selectArrow`	absolute end-3 text-[0.8rem] cursor-pointer [&>svg]:w-5 [&>svg]:h-5	Sets styles for select input arrow.
`selectArrowWhite`	text-gray-50 peer-focus:!text-white peer-data-[twe-input-focused]:!text-white	Sets arrow color for `selectFormWhite` attribute.
`selectArrowDefault`	top-2 text-surface/50 dark:text-white/50	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 end-9 text-surface cursor-pointer focus:text-primary outline-none dark:text-white	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-[twe-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-neutral-200 bg-transparent bg-clip-padding px-3 py-1.5 text-base font-normal text-surface transition duration-300 ease-in-out motion-reduce:transition-none focus:border-primary focus:text-gray-700 focus:shadow-twe-primary focus:outline-none dark:text-white dark:focus:border-primary dark:border-neutral-600 dark:placeholder:text-neutral-300 dark:bg-body-dark	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 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0 cursor-pointer data-[twe-input-disabled]:bg-neutral-200 data-[twe-input-disabled]:cursor-default group-data-[twe-was-validated]/validation:mb-4 dark:data-[twe-input-disabled]:bg-neutral-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-neutral-500 transition-all duration-200 ease-out peer-aria-expanded:text-primary peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 data-[twe-input-state-active]:scale-[0.8] dark:peer-focus:text-primary	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-[twe-input-state-active]:-translate-y-[0.9rem] data-[twe-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-[twe-input-state-active]:-translate-y-[1.15rem] data-[twe-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-[twe-input-state-active]:-translate-y-[0.75rem] data-[twe-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-[twe-select-selected='true']:bg-primary/30 data-[twe-select-selected='true']:data-[twe-input-state-active]:bg-primary/40 data-[twe-select-selected='true']:data-[twe-input-multiple-active]:bg-primary/40 data-[twe-select-option-disabled]:cursor-default data-[twe-select-option-disabled]:text-surface/50 data-[twe-select-option-disabled]:cursor-default data-[twe-select-option-disabled]:!bg-transparent data-[twe-input-state-active]:[&:not([data-twe-select-selected='true'])]:bg-black/5 data-[twe-input-multiple-active]:[&:not([data-twe-select-selected='true'])]:bg-black/5 hover:[&:not([data-twe-select-selected='true'])]:bg-black/5 hover:data-[twe-select-selected='true']:bg-primary/40 group-data-[twe-select-option-group-ref]/opt:ps-7 dark:text-white dark:data-[twe-select-option-disabled]:text-white/50 dark:hover:[&:not([data-twe-select-selected='true'])]:bg-black/10 dark:data-[twe-input-state-active]:[&:not([data-twe-select-selected='true'])]:bg-black/10 dark:data-[twe-input-multiple-active]:[&:not([data-twe-select-selected='true'])]:bg-black/10	Sets styles for every select options.
`selectAllOption`		Styling for select all option. By default it doesn't have any classes added and is using the same styles as `selectOption`. When classer are added, the `selectOption` styles are not applied to the select all option.
`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-white/50	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-black/50 dark:text-white/50	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-success cursor-pointer group-data-[twe-was-validated]/validation:peer-valid:block	Sets styles for valid feedback information.
`selectValidationInvalid`	hidden absolute -mt-3 w-auto text-sm text-danger cursor-pointer group-data-[twe-was-validated]/validation:peer-invalid:block	Sets styles for invalid feedback information.

javascript
umd

ES UMD

        
            
        new Select(
          document.querySelector("#select"),
          {},
          {
            selectOptionIcon: "w-7 h-7 rounded-full",
          }
        );

        
            
          new twe.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

ES UMD

        
            
        const selectEl = document.getElementById('mySelect');
        const select = new Select(selectEl);
        select.open();

        
            
        const selectEl = document.getElementById('mySelect');
        const select = new twe.Select(selectEl);
        select.open();

Events

Event type	Description
`open.twe.select`	This event fires immediately when the select is opened.
`close.twe.select`	This event fires immediately when the select is closed.
`valueChanged.twe.select`	This event fires immediately when the select value changes.
`optionSelected.twe.select`	This event fires immediately when the select option is selected.
`optionDeselected.twe.select`	This event fires immediately when the select option is deselected.

JavaScript

        
            
        const mySelect = document.getElementById('mySelect');
        mySelect.addEventListener('open.twe.select', (e) => {
          // do something...
        });

Select

Basic example

Multiselect

Select with label

Select with placeholder

Size

Disabled select

Disabled options

Clear button

Custom content

Visible options

Secondary text

Search

Modal title

Option groups

Select with icons

Set value

Single selection

Multi selection

Select with toggle element

Auto select

Hidden selected option

Select with CSS classes

Select - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events

Access restricted

To view this section you must have an active PRO account

Select

Tailwind CSS Select

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

Single selection

Multi selection

Select with toggle element

Auto select

Hidden selected option

Select with CSS classes

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Select - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events