Tailwind CSS Select - React

Use our Tailwind CSS Select component to collect user provided information from a list of options.

A Select component is a dropdown menu for displaying choices. Use the radio component when there are fewer total options (less than 5).

See below our Select component example that you can use in your Tailwind CSS and React project. The example comes in different colors and styles, so you can adapt it easily to your needs.

Select Version

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-72">
      <Select label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Select Variants

The Select component comes with 3 different variants that you can change it using the variant prop.

Select Version

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-72 gap-6">
      <Select variant="static" label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
      <Select variant="standard" label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
      <Select variant="outlined" label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Select Sizes

The Select component comes with 2 different sizes that you can change it using the size prop.

Select Version

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-72 gap-6">
      <Select size="md" label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
      <Select size="lg" label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Select Colors

The Select component comes with 19 different colors that you can change it using the color prop.

Select Version

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex w-72 flex-col gap-6">
      <Select color="blue" label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
      <Select color="purple" label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
      <Select color="teal" label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Select Validations

The Select component comes with error and success states for performing validations.

Select Version

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col w-72 gap-6">
      <Select label="Select Version" error>
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
      <Select label="Select Version" success>
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Custom Select Animation

You can modify the open/close state animation for Select component using the animate prop.

Select Version

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-72">
      <Select
        label="Select Version"
        animate={{
          mount: { y: 0 },
          unmount: { y: 25 },
        }}
      >
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Disabled Select

A Select could be disabled as well, it will help you to prevent user interactions like click or focus over the Select component.

Select Version

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-72">
      <Select label="Select Version" disabled>
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Countries Select

See the example below to see how you can create a Select component with a list of countries.

Select Country

import React from "react";
import { useCountries } from "use-react-countries";
import { Select, Option } from "@material-tailwind/react";
 
export default function CountriesSelect() {
  const { countries } = useCountries();
 
return (
 
<div className="w-72">
  <Select
    size="lg"
    label="Select Country"
    selected={(element) =>
      element &&
      React.cloneElement(element, {
        className: "flex items-center px-0 gap-2 pointer-events-none",
      })
    }
  >
    {countries.map(({ name, flags }) => (
      <Option key={name} value={name} className="flex items-center gap-2">
        <img
          src={flags.svg}
          alt={name}
          className="h-5 w-5 rounded-full object-cover"
        />
        {name}
      </Option>
    ))}
  </Select>
</div>
); }

Props

Learn more about props definition and types of select components.

Theme

Learn how to customize the theme and styles for select components.

rating bar

slider

Edit this page on Github

Tailwind CSS Select - React

Select Variants

Select Sizes

Select Colors

Select Validations

Custom Select Animation

Disabled Select

Countries Select

Related

Props

Theme