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 Variants() {
  return (
    <div className="flex items-end gap-4 w-full">
      <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>
      <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="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>
    </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 Sizes() {
  return (
    <div className="flex items-end gap-4 w-full">
      <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, below there are some examples of the colors but you can check all of the them here.

Select Version

import { Select, Option } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex flex-col gap-4 w-72">
      <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 Validations() {
  return (
    <div className="flex items-end gap-4 w-full">
      <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>
  );
}

Select Props

The following props are available for the select component. These are the custom props that come with we've added for the select component and you can use all the other native props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change input variant	`outlined`
`size`	Size	Change input size	`md`
`color`	Color	Change input color	`blue`
`label`	`string`	Add label for input	`''`
`error`	`boolean`	Change input state to error	`false`
`success`	`boolean`	Change input state to success	`false`
`arrow`	`node`	Change select arrow icon	`undefined`
`value`	`string`	Change selected value for select	`undefined`
`onChange`	`function`	Return selected value when select value changed	`undefined`
`selected`	`function`	Return selected element and it's index	`undefined`
`offset`	Offset	Change select menu offset from it's input	`5`
`dismiss`	Dismiss	Change dismiss listeners when clicking outside	`undefined`
`animate`	Animate	Change select menu animation	`undefined`
`lockScroll`	`boolean`	Lock page scrolling when select menu is opened	`false`
`labelProps`	`Object`	Add custom props for select label	`undefined`
`menuProps`	`Object`	Add custom props for select menu	`undefined`
`disabled`	`boolean`	Disable select input	`false`
`className`	`string`	Add custom className for select input	`''`
`children`	`node`	Add content for select	No default value its a required prop.

Select Option Props

The following props are available for the select option component. These are the custom props that come with we've added for the select option component and you can use all the other native props as well.

Attribute	Type	Description	Default
`value`	`string`	Add select option value, it works together with value props of select	`undefined`
`index`	`number`	Add select option value	`undefined`
`disabled`	`boolean`	Disable select option	`false`
`className`	`string`	Add custom className for select option	`''`
`children`	`node`	Add content for select option	No default value its a required prop.

Types

type variant = "standard" | "outlined" | "static";

type variant = "md" | "lg";

type color =
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

type offset =
  | number
  | {
      mainAxis?: number;
      crossAxis?: number;
      alignmentAxis?: number | null;
    };

type dismiss = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePointerDown?: boolean;
  outsidePointerDown?: boolean;
  ancestorScroll?: boolean;
  bubbles?: boolean;
};

type animate = {
  mount?: Object;
  unmount?: Object;
};

radio button

switch

Edit this page on Github