Tailwind CSS Select - Free Examples & Tutorial

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.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SelectBasicExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
          { text: "Six", value: 6 },
          { text: "Seven", value: 7 },
          { text: "Eight", value: 8 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} />
            </div>
          </div>
        );
      }

Hey there 👋 we're excited about TW Elements for React 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 prop to the select element to activate multiple mode.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function MultiselectExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
          { text: "Six", value: 6 },
          { text: "Seven", value: 7 },
          { text: "Eight", value: 8 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} multiple label="Example label" />
            </div>
          </div>
        );
      }

Select with label

You can add select label by adding label prop to the select component.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SelectWithLabelExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} label="Example label" />
            </div>
          </div>
        );
      }

Select with placeholder

Use placeholder prop to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SelectWithPlaceholderExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect
                data={data}
                placeholder="Example placeholder"
                preventFirstSelection
              />
            </div>
          </div>
        );
      }

Size

Change the size of select input by changing the value of size prop.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SizeExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex flex-col items-center justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} size="sm" label="Size sm" />
            </div>
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} label="Size default" />
            </div>
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} size="lg" label="Size lg" />
            </div>
          </div>
        );
      }

Disabled select

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

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function DisabledSelectExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} disabled />
            </div>
          </div>
        );
      }

Disabled options

Use disabled prop on option element to disable specific option.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function DisabledOptionsExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2, disabled: true },
          { text: "Three", value: 3, disabled: true },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} />
            </div>
          </div>
        );
      }

Clear button

Add the clearButton prop to display the button that will allow to clear current selections.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function ClearButtonExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} clearBtn label="Example label" preventFirstSelection />
            </div>
          </div>
        );
      }

Custom content

Children of the TESelect component will be displayed at the end of the select dropdown.

        
            
      import React from "react";
      import { TESelect, TERipple } from "tw-elements-react";
      
      export default function CustomContentExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data}>
                <div className="p-4">
                  <TERipple rippleColor="white">
                    <button className="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)]">
                      Save
                    </button>
                  </TERipple>
                </div>
              </TESelect>
            </div>
          </div>
        );
      }

Visible options

Use visibleOptions prop to change the number of options that will be displayed in the select dropdown without scrolling.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function VisibleOptionsExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} visibleOptions={3} />
            </div>
          </div>
        );
      }

Secondary text

Add secondaryText property to the specific options to display secondary text.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SecondaryTextExample(): JSX.Element {
        const data = [
          { text: "One", value: 1, secondaryText: "Secondary text" },
          { text: "Two", value: 2, secondaryText: "Secondary text" },
          { text: "Three", value: 3, secondaryText: "Secondary text" },
          { text: "Four", value: 4, secondaryText: "Secondary text" },
          { text: "Five", value: 5, secondaryText: "Secondary text" },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} optionHeight={52} />
            </div>
          </div>
        );
      }

Search

Add search prop to enable options filtering.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SearchExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
          { text: "Six", value: 6 },
          { text: "Seven", value: 7 },
          { text: "Eight", value: 8 },
          { text: "Nine", value: 9 },
          { text: "Ten", value: 10 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} search />
            </div>
          </div>
        );
      }

        
            
      import React, { useState } from "react";
      import {
        TESelect,
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
      } from "tw-elements-react";
      
      export default function SelectWithModalExample(): JSX.Element {
        const [showModal, setShowModal] = useState(false);
      
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
          { text: "Six", value: 6 },
          { text: "Seven", value: 7 },
          { text: "Eight", value: 8 },
        ];
      
        return (
          <div className="flex justify-center">
            {/* <!-- Button trigger modal --> */}
            <TERipple rippleColor="white">
              <button
                type="button"
                className="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)]"
                onClick={() => setShowModal(true)}
              >
                Launch demo modal
              </button>
            </TERipple>
      
            {/* <!-- Modal --> */}
            <TEModal show={showModal} setShow={setShowModal}>
              <TEModalDialog>
                <TEModalContent
                  theme={{
                    wrapper:
                      "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",
                  }}
                >
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModal(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>
                    <TESelect data={data} />
                  </TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="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"
                        onClick={() => setShowModal(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="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)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

Option groups

It is possible to group options by using optgroup property.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function OptionGroupsExample(): JSX.Element {
        const data = [
          { text: "Label 1", optgroup: true, disabled: true },
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Label 2", optgroup: true, disabled: true },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
          { text: "Six", value: 6 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} />
            </div>
          </div>
        );
      }

Select with icons

Add icon property to the specific options to display the option icon.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SelectWithIconsExample(): JSX.Element {
        const data = [
          {
            text: "One",
            value: 1,
            icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp",
          },
          {
            text: "Two",
            value: 2,
            icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp",
          },
          {
            text: "Three",
            value: 3,
            icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp",
          },
          {
            text: "Four",
            value: 4,
            icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp",
          },
          {
            text: "Five",
            value: 5,
            icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp",
          },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} />
            </div>
          </div>
        );
      }

Set value

The selectValue state value 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

        
            
      import React, { useState } from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SetValueExample(): JSX.Element {
        const [selectValue, setSelectValue] = useState(4);
      
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect
                data={data}
                value={selectValue}
                onValueChange={(e: any) => {
                  setSelectValue(e.value);
                }}
              />
            </div>
          </div>
        );
      }

Multi selection

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

        
            
      import React, { useState } from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SelectValueMultipleExample(): JSX.Element {
        const [selectValue, setSelectValue] = useState([3, 4, 5]);
      
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect
                data={data}
                multiple
                value={selectValue}
                onValueChange={(e: any) => {
                  const newValue = e.map((el: any) => el.value);
                  setSelectValue(newValue);
                }}
              />
            </div>
          </div>
        );
      }

Select with toggle element

Use the open and setOpen props to control the select dropdown visibility.

        
            
      import React, { useState } from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SelectWithToggle(): JSX.Element {
        const [open, setOpen] = useState(false);
      
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
        ];
      
        return (
          <>
            <div className="flex flex-col items-center justify-center">
              <div className="relative mb-3 md:w-96 pt-5">
                <TESelect open={open} setOpen={setOpen} data={data} multiple />
              </div>
      
              <button
                className="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)]"
                onClick={() => setOpen(!open)}
              >
                Toggle Select
              </button>
            </div>
          </>
        );
      }

Auto select

Set autoSelect prop to the Select component to enable selecting on Tab press.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function AutoSelectExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
          { text: "Six", value: 6 },
          { text: "Seven", value: 7 },
          { text: "Eight", value: 8 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} autoSelect />
            </div>
          </div>
        );
      }

Hidden selected option

Add preventFirstSelection prop to leave select with no selection.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function HiddenSelectedOptionExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
          { text: "Six", value: 6 },
          { text: "Seven", value: 7 },
          { text: "Eight", value: 8 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect data={data} label="Example label" preventFirstSelection />
            </div>
          </div>
        );
      }

Select with CSS classes

In order to use select with additional CSS classes you need to add the className prop and use CSS classes you want.

        
            
      import React from "react";
      import { TESelect } from "tw-elements-react";
      
      export default function SelectWithCSSExample(): JSX.Element {
        const data = [
          { text: "One", value: 1 },
          { text: "Two", value: 2 },
          { text: "Three", value: 3 },
          { text: "Four", value: 4 },
          { text: "Five", value: 5 },
          { text: "Six", value: 6 },
          { text: "Seven", value: 7 },
          { text: "Eight", value: 8 },
        ];
      
        return (
          <div className="flex justify-center">
            <div className="relative mb-3 md:w-96 pt-5">
              <TESelect className="shadow-xl" data={data} label="Example label" />
            </div>
          </div>
        );
      }

If you are looking for more advanced options, try Bootstrap Select from MDBootstrap.

Import

Properties

TESelect

Name	Type	Default	Description
`autoSelect`	boolean	`false`	Enables auto selecting on Tab press
`clearBtn`	boolean	`false`	Add clear btn to `TESelect`
`clearIcon`	React.ComponentElement	`-`	Changes template for the clear icon
`container`	string	`'body'`	Changes the container for the selects dropdown
`contrast`	boolean	`false`	Adjust input colors for dark backgrounds
`data`	SelectData[]	`[]`	Add data to `TESelect`
`disabled`	boolean	`false`	Makes the `TESelect` input disabled
`displayedLabels`	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
`label`	string	`''`	Add label to select
`multiple`	boolean	`false`	Change select to multiselect
`noResultsText`	string	`'No results'`	Change text in option search if there is no records in search value.
`open`	boolean	`-`	Allows to change the open state of the `TESelect` component
`setOpen`	React.Dispatch>	`-`	Updates the `open` state prop inside the `TESelect` component so that the `open` value would be correct
`optionHeight`	number	`38`	Defines a height of the options (in px)
`optionsSelectedLabel`	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
`placeholder`	string	`''`	Add placeholder to `TESelect`
`preventFirstSelection`	boolean	`false`	Prevents selecting first option by default
`search`	boolean	`false`	Add search to `TESelect` input in dropdown
`searchLabel`	string	`'Example Label'`	Change label of input
`selectAll`	boolean	`true`	Displays select all option in multiselect dropdown
`selectAllLabel`	string	`'Select all'`	Change label to select all option in multiselect
`selectIcon`	React.ComponentElement	`-`	Changes template for the select icon
`size`	'default' \| 'lg' \| 'sm'	`'default'`	Size of the `TESelect` input
`tag`	string	`'div'`	Change the tag of the `TESelect` wrapper element
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component
`value`	string \| string[]	`-`	Sets the value of the `TESelect` component
`visibleOptions`	string \| number	`'5'`	Change visible options in `TESelect`

Classes

Custom classes can be passed via theme prop. Create an object with classes like below and pass it to the prop.

Name	Default	Description
`dropdown`	relative outline-none min-w-[100px] m-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 dark:bg-zinc-700	Sets transition, size and appearance styles for select dropdown.
`dropdownVisible`	opacity-100 scale-100	Sets styles for the visible dropdown
`dropdownHidden`	opacity-0 scale-[0.8]	Sets styles for the hidden dropdown
`formCheckInput`	relative float-left mt-[0.15rem] mr-[8px] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-neutral-300 dark:border-neutral-600 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-[0px_0px_0px_13px_transparent] before:content-[''] checked:border-primary dark:checked:border-primary checked:bg-primary dark:checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:ml-[0.25rem] checked:after:-mt-px 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-t-0 checked:after:border-l-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-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] dark:focus:before:shadow-[0px_0px_0px_13px_rgba(255,255,255,0.4)] 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-[0px_0px_0px_13px_#3b71ca] dark:checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:ml-[0.25rem] checked:focus:after:-mt-px 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-t-0 checked:focus:after:border-l-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent	Sets styles for checkbox input inside the select dropdown.
`formOutline`	relative	Sets position attribute form select input wrapper.
`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 w-5 h-5 pointer-events-none	Sets position and size of select arrow icon.
`selectArrowFocused`	text-primary	Sets color of select arrow icon when select input is focused.
`selectArrowWhite`	text-gray-50	Sets color of select arrow icon when select input is in contrast mode and not focused.
`selectArrowWhiteFocused`	!text-white	Sets color of select arrow icon when select input is in contrast mode and focused.
`selectArrowDefault`	top-2	Adds default classes to the arrow icon.
`selectArrowLg`	top-[13px]	Adds classes to the arrow icon when size was set to `lg`.
`selectArrowSm`	top-1	Adds classes to the arrow icon when size was set to `sm`.
`selectClearBtn`	absolute top-2 right-9 text-black cursor-pointer focus:text-primary outline-none dark:text-gray-200 w-5 h-5	Sets position, color and size of clear button icon.
`selectClearBtnWhite`	!text-gray-50	Adds classes to the clear button icon when select input is in contrast mode and not focused.
`selectClearBtnDefault`	top-2 text-base	Adds default classes to the select clear button.
`selectClearBtnLg`	top-[11px] text-base	Adds classes to the clear button when size was set to `lg`.
`selectClearBtnSm`	top-1 text-[0.8rem]	Adds classes to the clear button when size was set to `sm`.
`selectDropdownContainer`	z-[1070]	Adds classes to the dropdown container.
`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-primary focus:text-gray-700 focus:shadow-te-primary focus:outline-none dark:text-gray-200 dark:placeholder:text-gray-200	Sets classes for the filter input inside the dropdown container.
`selectInput`	peer block min-h-[auto] w-full rounded border-0 bg-transparent outline-none transition-all duration-200 ease-linear peer-focus:text-primary motion-reduce:transition-none disabled:bg-neutral-100 dark:disabled:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary cursor-pointer disabled:cursor-default	Sets classes for the select main input element.
`selectLabel`	pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate text-neutral-500 transition-all duration-200 ease-out peer-focus:scale-[0.8] peer-focus:text-primary motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary	Sets styles for select input label.
`selectOption`	flex flex-row items-center justify-between w-full px-4 truncate select-none	Sets styles for every select options.
`selectOptionDefault`	bg-transparent hover:bg-black/5 dark:bg-white/30 text-gray-700 dark:text-gray-200 cursor-pointer	Sets default styles for every select options.
`selectOptionDisabled`	cursor-default text-gray-400 bg-transparent dark:text-gray-400	Sets styles for disabled select options.
`selectOptionSelected`	bg-black/5 dark:bg-white/30	Sets styles for selected select options.
`selectOptionActive`	bg-black/5 dark:bg-white/30	Sets styles for active select options.
`selectOptionNonDisabled`	hover:bg-black/5 dark:hover:bg-white/30 cursor-pointer	Sets hover styles for non disabled options.
`selectOptionsOptGroup`	pl-7	Sets styles for select options optgroup element.
`selectOptionGroup`	group/opt pointer-none	Sets styles for select options optgroup element.
`selectOptionGroupLabel`	flex flex-row items-center w-full px-4 truncate bg-transparent text-black/50 select-none dark:text-gray-300	Adds styles for the label element inside the optgroup wrapper element.
`selectOptionIcon`	w-7 h-7 rounded-full	Adds styles for the wrapper of icon element.
`selectOptionSecondaryText`	block text-[0.8rem] text-gray-500 dark:text-gray-300	Adds classes for the secondary text wrapper.

Events

Event type	Description
`onClose`	This event fires immediately when the select is closed.
`onOpen`	This event fires immediately when the select is opened.
`onOptionDeselect`	This event fires immediately when the select option is deselected. You can use `data` argument here.
`onOptionSelect`	This event fires immediately when the select option is selected. You can use `data` argument here.
`onValueChange`	his event fires immediately when the select value changes. You can use `data` argument here.

        
            
        import React from "react";
        import { TESelect } from "tw-elements-react";
        
        export default function App(): JSX.Element {
          const data = [
            { text: "One", value: 1 },
            { text: "Two", value: 2 },
            { text: "Three", value: 3 },
            { text: "Four", value: 4 },
            { text: "Five", value: 5 },
            { text: "Six", value: 6 },
            { text: "Seven", value: 7 },
            { text: "Eight", value: 8 },
          ];
        
          return (
            <div className="flex justify-center">
              <div className="relative mb-3 md:w-96 pt-5">
                <TESelect data={data} onClose={() => console.log("do something")} />
              </div>
            </div>
          );
        }

Tailwind React Select Component

Tailwind CSS React Select

Basic example

Multiselect

Select with label

Select with placeholder

Size

Disabled select

Disabled options

Clear button

Custom content

Visible options

Secondary text

Search

Option groups

Select with icons

Set value

Single selection

Multi selection

Select with toggle element

Auto select

Hidden selected option

Select with CSS classes

Tailwind React Select Component - API

Import

Properties

TESelect

Classes

Events

Tailwind React Select Component

Tailwind CSS React 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:

Tailwind React Select Component - API

Import

Properties

TESelect

Classes

Events