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.


import { Select, Option } from "@material-tailwind/react";
 
export function SelectDefault() {
  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.

import { Select, Option } from "@material-tailwind/react";
 
export function SelectVariants() {
  return (
    <div className="flex w-72 flex-col 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.

import { Select, Option } from "@material-tailwind/react";
 
export function SelectSizes() {
  return (
    <div className="flex w-72 flex-col 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.

import { Select, Option } from "@material-tailwind/react";
 
export function SelectColors() {
  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.

import { Select, Option } from "@material-tailwind/react";
 
export function SelectValidations() {
  return (
    <div className="flex w-72 flex-col 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>
  );
}

Controlled Select

You can make the Select component to be controlled using the value and onChange props.

import React from "react";
import { Select, Option } from "@material-tailwind/react";
 
export function ControlledSelect() {
  const [value, setValue] = React.useState("react");
 
  return (
    <div className="w-72">
      <Select
        label="Select Version"
        value={value}
        onChange={(val) => setValue(val)}
      >
        <Option value="html">Material Tailwind HTML</Option>
        <Option value="react">Material Tailwind React</Option>
        <Option value="vue">Material Tailwind Vue</Option>
        <Option value="angular">Material Tailwind Angular</Option>
        <Option value="svelte">Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Select Custom Animation

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

import { Select, Option } from "@material-tailwind/react";
 
export function SelectCustomAnimation() {
  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>
  );
}

Select Disabled

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

import { Select, Option } from "@material-tailwind/react";
 
export function SelectDisabled() {
  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.


This example is using use-react-countries make sure you have installed it.

npm i use-react-countries

import React from "react";
import { useCountries } from "use-react-countries";
import { Select, Option } from "@material-tailwind/react";
 
export function CountriesSelect() {
  const { countries } = useCountries();
 
  return (
    <div className="w-72">
      <Select
        size="lg"
        label="Select Country"
        selected={(element) =>
          element &&
          React.cloneElement(element, {
            disabled: true,
            className:
              "flex items-center opacity-100 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>
  );
}

Select Props

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

AttributeTypeDescriptionDefault
variantVariantChange select variantoutlined
sizeSizeChange select sizemd
colorColorChange select colorgray
labelstringAdd label for select''
errorbooleanChange select state to errorfalse
successbooleanChange select state to successfalse
arrownodeChange select arrow iconundefined
valuestringChange selected value for selectundefined
onChangefunctionReturn selected value when select value changedundefined
selectedfunctionReturn selected element and it's indexundefined
offsetOffsetChange select menu offset from it's input5
dismissDismissChange dismiss listeners when clicking outsideundefined
animateAnimateChange select menu animationundefined
lockScrollbooleanLock page scrolling when select menu is openedfalse
containerPropsobjectAdd custom props for select containerundefined
labelPropsobjectAdd custom props for select labelundefined
menuPropsobjectAdd custom props for select menuundefined
disabledbooleanDisable selectfalse
namestringAdd name for selectfalse
classNamestringAdd custom className for select''
childrennodeAdd content for selectNo default value it's a required prop.


For TypeScript Only

import type { SelectProps } from "@material-tailwind/react";

Select Option Props

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

AttributeTypeDescriptionDefault
valuestringAdd select option value, it works together with value props of selectundefined
indexnumberAdd select option valueundefined
disabledbooleanDisable select optionfalse
classNamestringAdd custom className for select option''
childrennodeAdd content for select optionNo default value it's a required prop.


For TypeScript Only

import type { SelectOptionProps } from "@material-tailwind/react";

Types - Variant

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

Types - Size

type size = "md" | "lg";

Types - Color

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

Types - Offset

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

Types - Dismiss

type dismissType = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePress?: boolean;
  referencePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  outsidePress?: boolean | ((event: MouseEvent) => boolean);
  outsidePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  ancestorScroll?: boolean;
  bubbles?: boolean | {
      escapeKey?: boolean;
      outsidePress?: boolean;
  };
};

Types - Animate

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

Select Theme

Learn how to customize the theme and styles for select components, the theme object for select components has three main objects:

A. The defaultProps object for setting up the default value for props of select components.
B. The valid object for customizing the valid values for select components props.
C. The styles object for customizing the theme and styles of select components.

You can customize the theme and styles of select components by adding Tailwind CSS classes as key paired values for objects.



Select Theme Object Type

Variant of Select component theme has a specific type of Select Variant Styles Type

interface SelectStylesType {
  defaultProps: {
    variant: string;
    color: string;
    size: string;
    label: string;
    error: boolean;
    success: boolean;
    arrow: node;
    value: string;
    onChange: func;
    selected: func;
    offset:
      | number
      | {
          mainAxis: number;
          crossAxis: number;
          alignmentAxis: number;
        };
    dismiss: {
      enabled: boolean;
      escapeKey: boolean;
      referencePress: boolean;
      referencePressEvent: 'pointerdown' | 'mousedown' | 'click';
      outsidePress: boolean | ((event: MouseEvent) => boolean);
      outsidePressEvent: 'pointerdown' | 'mousedown' | 'click';
      ancestorScroll: boolean;
      bubbles: boolean | {
          escapeKey: boolean;
          outsidePress: boolean;
      };
    };
    animate: {
      mount: object;
      unmount: object;
    };
    autoHeight: boolean;
    lockScroll: boolean;
    labelProps: object;
    menuProps: boolean;
    className: string;
    disabled: boolean;
  };
  valid: {
    variants: string[];
    sizes: string[];
    colors: string[];
  };
  styles: {
    base: {
      container: object;
      select: object;
      arrow: {
        initial: object;
        active: object;
      };
      label: object;
      menu: object;
      option: {
        initial: object;
        active: object;
        disabled: object;
      };
    };
    variants: {
      outlined: SelectVariantStylesType;
      standard: SelectVariantStylesType;
      static: SelectVariantStylesType;
    };
  };
}


For TypeScript Only

import type { SelectStylesType } from "@material-tailwind/react";

Theme Object Type - Select Variant

Select variant object type contains three specific types of Select Size Styles Type, Select States Styles Type and Select State Styles Type

interface SelectVariantStylesType {
  base: {
    select: object;
    label: object;
  };
  sizes: {
    md: SelectSizeStylesType;
    lg: SelectSizeStylesType;
  };
  colors: {
    select: object;
    label: object;
  };
  states: SelectStatesStylesType;
  error: SelectStateStylesType;
  success: SelectStateStylesType;
}


For TypeScript Only

import type { SelectVariantStylesType } from "@material-tailwind/react";

Theme Object Type - Select Size

interface SelectSizeStylesType {
  container: object;
  select: object;
  label: {
    initial: object;
    states: {
      close: object;
      open: object;
      withValue: object;
    };
  };
}


For TypeScript Only

import type { SelectSizeStylesType } from "@material-tailwind/react";

Theme Object Type - Select States

interface SelectStatesStylesType {
  close: {
    select: object;
    label: object;
  };
  open: {
    select: object;
    label: object;
  };
  withValue: {
    select: object;
    label: object;
  };
}


For TypeScript Only

import type { SelectStatesStylesType } from "@material-tailwind/react";

Theme Object Type - Select State

interface SelectStateStylesType {
  select: {
    initial: object;
    states: {
      close: object;
      open: object;
      withValue: object;
    };
  };
  label: {
    initial: object;
    states: {
      close: object;
      open: object;
      withValue: object;
    };
  };
}


For TypeScript Only

import type { SelectStateStylesType } from "@material-tailwind/react";

Select Theme Customization

const theme = {
  select: {
    defaultProps: {
      variant: "outlined",
      color: "blue",
      size: "md",
      label: "",
      error: false,
      success: false,
      arrow: undefined,
      value: undefined,
      onChange: undefined,
      selected: undefined,
      offset: 5,
      dismiss: {},
      animate: {
        unmount: {},
        mount: {},
      },
      autoHeight: false,
      lockScroll: false,
      labelProps: {},
      menuProps: {},
      className: "",
      disabled: false,
      containerProps: undefined,
    },
    valid: {
      variants: ["standard", "outlined", "static"],
      sizes: ["md", "lg"],
      colors: [
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        container: {
          position: "relative",
          width: "w-full",
          minWidth: "min-w-[200px]",
        },
        select: {
          peer: "peer",
          width: "w-full",
          height: "h-full",
          bg: "bg-transparent",
          color: "text-blue-gray-700",
          fontFamily: "font-sans",
          fontWeight: "font-normal",
          textAlign: "text-left",
          outline: "outline outline-0 focus:outline-0",
          disabled: "disabled:bg-blue-gray-50 disabled:border-0",
          transition: "transition-all",
        },
        arrow: {
          initial: {
            display: "grid",
            placeItems: "place-items-center",
            position: "absolute",
            top: "top-2/4",
            right: "right-2",
            pt: "pt-px",
            width: "w-5",
            height: "h-5",
            color: "text-blue-gray-400",
            transform: "rotate-0 -translate-y-2/4",
            transition: "transition-all",
          },
          active: {
            transform: "rotate-180",
            mt: "mt-px",
          },
        },
        label: {
          display: "flex",
          width: "w-full",
          height: "h-full",
          userSelect: "select-none",
          pointerEvents: "pointer-events-none",
          position: "absolute",
          left: "left-0",
          fontWeight: "font-normal",
          transition: "transition-all",
        },
        menu: {
          width: "w-full",
          maxHeight: "max-h-96",
          bg: "bg-white",
          p: "p-3",
          border: "border border-blue-gray-50",
          borderRadius: "rounded-md",
          boxShadow: "shadow-lg shadow-blue-gray-500/10",
          fontFamily: "font-sans",
          fontSize: "text-sm",
          fontWeight: "font-normal",
          color: "text-blue-gray-500",
          overflow: "overflow-auto",
          outline: "focus:outline-none",
        },
        option: {
          initial: {
            pt: "pt-[9px]",
            pb: "pb-2",
            px: "px-3",
            borderRadius: "rounded-md",
            lightHeight: "leading-tight",
            cursor: "cursor-pointer",
            userSelect: "select-none",
            background: "hover:bg-blue-gray-50 focus:bg-blue-gray-50",
            opacity: "hover:bg-opacity-80 focus:bg-opacity-80",
            color: "hover:text-blue-gray-900 focus:text-blue-gray-900",
            outline: "outline outline-0",
            transition: "transition-all",
          },
          active: {
            bg: "bg-blue-gray-50 bg-opacity-80",
            color: "text-blue-gray-900",
          },
          disabled: {
            opacity: "opacity-50",
            cursor: "cursor-not-allowed",
            userSelect: "select-none",
            pointerEvents: "pointer-events-none",
          },
        },
      },
      variants: {
        outlined: {
          base: {
            select: {},
            label: {
              position: "-top-1.5",
              before: {
                content: "before:content[' ']",
                display: "before:block",
                boxSizing: "before:box-border",
                width: "before:w-2.5",
                height: "before:h-1.5",
                mt: "before:mt-[6.5px]",
                mr: "before:mr-1",
                borderRadius: "before:rounded-tl-md",
                pointerEvents: "before:pointer-events-none",
                transition: "before:transition-all",
                disabled: "peer-disabled:before:border-transparent",
              },
              after: {
                content: "after:content[' ']",
                display: "after:block",
                flexGrow: "after:flex-grow",
                boxSizing: "after:box-border",
                width: "after:w-2.5",
                height: "after:h-1.5",
                mt: "after:mt-[6.5px]",
                ml: "after:ml-1",
                borderRadius: "after:rounded-tr-md",
                pointerEvents: "after:pointer-events-none",
                transition: "after:transition-all",
                disabled: "peer-disabled:after:border-transparent",
              },
            },
          },
          sizes: {
            md: {
              container: {
                height: "h-10",
              },
              select: {
                fontSize: "text-sm",
                px: "px-3",
                py: "py-2.5",
                borderRadius: "rounded-[7px]",
              },
              label: {
                initial: {},
                states: {
                  close: {
                    lineHeight: "leading-[3.75]",
                  },
                  open: {
                    lineHeight: "leading-tight",
                  },
                  withValue: {
                    lineHeight: "leading-tight",
                  },
                },
              },
            },
            lg: {
              container: {
                height: "h-11",
              },
              select: {
                fontSize: "text-sm",
                px: "px-3",
                py: "py-3",
                borderRadius: "rounded-[7px]",
              },
              label: {
                initial: {},
                states: {
                  close: {
                    lineHeight: "leading-[4.1]",
                  },
                  open: {
                    lineHeight: "leading-tight",
                  },
                  withValue: {
                    lineHeight: "leading-tight",
                  },
                },
              },
            },
          },
          colors: {
            select: {
              "blue-gray": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-blue-gray-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              gray: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-gray-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              brown: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-brown-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              "deep-orange": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-deep-orange-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              orange: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-orange-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              amber: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-amber-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              yellow: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-yellow-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              lime: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-lime-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              "light-green": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-light-green-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              green: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-green-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              teal: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-teal-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              cyan: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-cyan-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              "light-blue": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-light-blue-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              blue: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-blue-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              indigo: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-indigo-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              "deep-purple": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-deep-purple-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              purple: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-purple-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              pink: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-pink-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
              red: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-red-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                  borderTopColor: "border-t-transparent",
                },
              },
            },
            label: {
              "blue-gray": {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-blue-gray-500",
                  before: "before:border-blue-gray-500",
                  after: "after:border-blue-gray-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              gray: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-gray-500",
                  before: "before:border-gray-500",
                  after: "after:border-gray-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              brown: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-brown-500",
                  before: "before:border-brown-500",
                  after: "after:border-brown-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              "deep-orange": {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-deep-orange-500",
                  before: "before:border-deep-orange-500",
                  after: "after:border-deep-orange-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              orange: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-orange-500",
                  before: "before:border-orange-500",
                  after: "after:border-orange-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              amber: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-amber-500",
                  before: "before:border-amber-500",
                  after: "after:border-amber-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              yellow: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-yellow-500",
                  before: "before:border-yellow-500",
                  after: "after:border-yellow-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              lime: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-lime-500",
                  before: "before:border-lime-500",
                  after: "after:border-lime-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              "light-green": {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-light-green-500",
                  before: "before:border-light-green-500",
                  after: "after:border-light-green-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              green: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-green-500",
                  before: "before:border-green-500",
                  after: "after:border-green-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              teal: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-teal-500",
                  before: "before:border-teal-500",
                  after: "after:border-teal-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              cyan: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-cyan-500",
                  before: "before:border-cyan-500",
                  after: "after:border-cyan-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              "light-blue": {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-light-blue-500",
                  before: "before:border-light-blue-500",
                  after: "after:border-light-blue-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              blue: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-blue-500",
                  before: "before:border-blue-500",
                  after: "after:border-blue-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              indigo: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-indigo-500",
                  before: "before:border-indigo-500",
                  after: "after:border-indigo-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              "deep-purple": {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-deep-purple-500",
                  before: "before:border-deep-purple-500",
                  after: "after:border-deep-purple-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              purple: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-purple-500",
                  before: "before:border-purple-500",
                  after: "after:border-purple-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              pink: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-pink-500",
                  before: "before:border-pink-500",
                  after: "after:border-pink-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
              red: {
                close: {
                  color: "text-blue-gray-400",
                  before: "before:border-transparent",
                  after: "after:border-transparent",
                },
                open: {
                  color: "text-red-500",
                  before: "before:border-red-500",
                  after: "after:border-red-500",
                },
                withValue: {
                  color: "text-blue-gray-400",
                  before: "before:border-blue-gray-200",
                  after: "after:border-blue-gray-200",
                },
              },
            },
          },
          states: {
            close: {
              select: {
                borderWidth: "border",
              },
              label: {
                fontSize: "text-sm",
                disabled: "peer-disabled:text-blue-gray-400",
                before: {
                  bt: "before:border-t-transparent",
                  bl: "before:border-l-transparent",
                },
                after: {
                  bt: "after:border-t-transparent",
                  br: "after:border-r-transparent",
                },
              },
            },
            open: {
              select: {
                borderWidth: "border-2",
                borderColor: "border-t-transparent",
              },
              label: {
                fontSize: "text-[11px]",
                disabled: "peer-disabled:text-transparent",
                before: {
                  bt: "before:border-t-2",
                  bl: "before:border-l-2",
                },
                after: {
                  bt: "after:border-t-2",
                  br: "after:border-r-2",
                },
              },
            },
            withValue: {
              select: {
                borderWidth: "border",
                borderColor: "border-t-transparent",
              },
              label: {
                fontSize: "text-[11px]",
                disabled: "peer-disabled:text-transparent",
                before: {
                  bt: "before:border-t",
                  bl: "before:border-l",
                },
                after: {
                  bt: "after:border-t",
                  br: "after:border-r",
                },
              },
            },
          },
          error: {
            select: {
              initial: {},
              states: {
                close: {
                  borderColor: "border-red-500",
                },
                open: {
                  borderColor: "border-red-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-red-500",
                  borderTopColor: "border-t-transparent",
                },
              },
            },
            label: {
              initial: {},
              states: {
                close: {
                  color: "text-red-500",
                  before: "before:border-red-500",
                  after: "after:border-red-500",
                },
                open: {
                  color: "text-red-500",
                  before: "before:border-red-500",
                  after: "after:border-red-500",
                },
                withValue: {
                  color: "text-red-500",
                  before: "before:border-red-500",
                  after: "after:border-red-500",
                },
              },
            },
          },
          success: {
            select: {
              initial: {},
              states: {
                close: {
                  borderColor: "border-green-500",
                },
                open: {
                  borderColor: "border-green-500",
                  borderTopColor: "border-t-transparent",
                },
                withValue: {
                  borderColor: "border-green-500",
                  borderTopColor: "border-t-transparent",
                },
              },
            },
            label: {
              initial: {},
              states: {
                close: {
                  color: "text-green-500",
                  before: "before:border-green-500",
                  after: "after:border-green-500",
                },
                open: {
                  color: "text-green-500",
                  before: "before:border-green-500",
                  after: "after:border-green-500",
                },
                withValue: {
                  color: "text-green-500",
                  before: "before:border-green-500",
                  after: "after:border-green-500",
                },
              },
            },
          },
        },
        standard: {
          base: {
            select: {},
            label: {
              position: "-top-1.5",
              after: {
                content: "after:content[' ']",
                display: "after:block",
                width: "after:w-full",
                position: "after:absolute",
                bottom: "after:-bottom-1.5",
                left: "left-0",
                borderWidth: "after:border-b-2",
                transition: "after:transition-transform after:duration-300",
              },
            },
          },
          sizes: {
            md: {
              container: {
                height: "h-11",
              },
              select: {
                fontSize: "text-sm",
                pt: "pt-4",
                pb: "pb-1.5",
              },
              label: {
                initial: {},
                states: {
                  close: {
                    lineHeight: "leading-[4.25]",
                  },
                  open: {
                    lineHeight: "leading-tight",
                  },
                  withValue: {
                    lineHeight: "leading-tight",
                  },
                },
              },
            },
            lg: {
              container: {
                height: "h-12",
              },
              select: {
                fontSize: "text-sm",
                px: "px-px",
                pt: "pt-5",
                pb: "pb-2",
              },
              label: {
                initial: {},
                states: {
                  close: {
                    lineHeight: "leading-[4.875]",
                  },
                  open: {
                    lineHeight: "leading-tight",
                  },
                  withValue: {
                    lineHeight: "leading-tight",
                  },
                },
              },
            },
          },
          colors: {
            select: {
              "blue-gray": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-blue-gray-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              gray: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-gray-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              brown: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-brown-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              "deep-orange": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-deep-orange-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              orange: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-orange-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              amber: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-amber-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              yellow: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-yellow-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              lime: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-lime-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              "light-green": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-light-green-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              green: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-green-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              teal: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-teal-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              cyan: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-cyan-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              "light-blue": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-light-blue-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              blue: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-blue-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              indigo: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-indigo-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              "deep-purple": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-deep-purple-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              purple: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-purple-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              pink: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-pink-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              red: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-red-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
            },
            label: {
              "blue-gray": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-gray-500",
                },
                open: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-gray-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-gray-50",
                },
              },
              gray: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-gray-500",
                },
                open: {
                  color: "text-gray-500",
                  after: "after:border-gray-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-gray-500",
                },
              },
              brown: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-brown-500",
                },
                open: {
                  color: "text-brown-500",
                  after: "after:border-brown-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-brown-500",
                },
              },
              "deep-orange": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-deep-orange-500",
                },
                open: {
                  color: "text-deep-orange-500",
                  after: "after:border-deep-orange-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-deep-orange-500",
                },
              },
              orange: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-orange-500",
                },
                open: {
                  color: "text-orange-500",
                  after: "after:border-orange-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-orange-500",
                },
              },
              amber: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-amber-500",
                },
                open: {
                  color: "text-amber-500",
                  after: "after:border-amber-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-amber-500",
                },
              },
              yellow: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-yellow-500",
                },
                open: {
                  color: "text-yellow-500",
                  after: "after:border-yellow-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-yellow-500",
                },
              },
              lime: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-lime-500",
                },
                open: {
                  color: "text-lime-500",
                  after: "after:border-lime-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-lime-500",
                },
              },
              "light-green": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-light-green-500",
                },
                open: {
                  color: "text-light-green-500",
                  after: "after:border-light-green-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-light-green-500",
                },
              },
              green: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-green-500",
                },
                open: {
                  color: "text-green-500",
                  after: "after:border-green-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-green-500",
                },
              },
              teal: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-teal-500",
                },
                open: {
                  color: "text-teal-500",
                  after: "after:border-teal-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-teal-500",
                },
              },
              cyan: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-cyan-500",
                },
                open: {
                  color: "text-cyan-500",
                  after: "after:border-cyan-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-cyan-500",
                },
              },
              "light-blue": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-light-blue-500",
                },
                open: {
                  color: "text-light-blue-500",
                  after: "after:border-light-blue-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-light-blue-500",
                },
              },
              blue: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-500",
                },
                open: {
                  color: "text-blue-500",
                  after: "after:border-blue-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-500",
                },
              },
              indigo: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-indigo-500",
                },
                open: {
                  color: "text-indigo-500",
                  after: "after:border-indigo-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-indigo-500",
                },
              },
              "deep-purple": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-deep-purple-500",
                },
                open: {
                  color: "text-deep-purple-500",
                  after: "after:border-deep-purple-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-deep-purple-500",
                },
              },
              purple: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-purple-500",
                },
                open: {
                  color: "text-purple-500",
                  after: "after:border-purple-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-purple-500",
                },
              },
              pink: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-pink-500",
                },
                open: {
                  color: "text-pink-500",
                  after: "after:border-pink-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-pink-500",
                },
              },
              red: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-red-500",
                },
                open: {
                  color: "text-red-500",
                  after: "after:border-red-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-red-500",
                },
              },
            },
          },
          states: {
            close: {
              select: {
                borderWidth: "border-b",
              },
              label: {
                fontSize: "text-sm",
                disabled: "peer-disabled:text-blue-gray-400",
                after: {
                  transform: "after:scale-x-0",
                },
              },
            },
            open: {
              select: {
                borderWidth: "border-b",
              },
              label: {
                fontSize: "text-[11px]",
                disabled: "peer-disabled:text-transparent",
                after: {
                  transform: "after:scale-x-100",
                },
              },
            },
            withValue: {
              select: {
                borderWidth: "border-b",
              },
              label: {
                fontSize: "text-[11px]",
                disabled: "peer-disabled:text-transparent",
                after: {
                  transform: "after:scale-x-0",
                },
              },
            },
          },
          error: {
            select: {
              initial: {},
              states: {
                close: {
                  borderColor: "border-red-500",
                },
                open: {
                  borderColor: "border-red-500",
                },
                withValue: {
                  borderColor: "border-red-500",
                },
              },
            },
            label: {
              initial: {},
              states: {
                close: {
                  color: "text-red-500",
                  after: "after:border-red-500",
                },
                open: {
                  color: "text-red-500",
                  after: "after:border-red-500",
                },
                withValue: {
                  color: "text-red-500",
                  after: "after:border-red-500",
                },
              },
            },
          },
          success: {
            select: {
              initial: {},
              states: {
                close: {
                  borderColor: "border-green-500",
                },
                open: {
                  borderColor: "border-green-500",
                },
                withValue: {
                  borderColor: "border-green-500",
                },
              },
            },
            label: {
              initial: {},
              states: {
                close: {
                  color: "text-green-500",
                  after: "after:border-green-500",
                },
                open: {
                  color: "text-green-500",
                  after: "after:border-green-500",
                },
                withValue: {
                  color: "text-green-500",
                  after: "after:border-green-500",
                },
              },
            },
          },
        },
        static: {
          base: {
            select: {},
            label: {
              position: "-top-2.5",
              after: {
                content: "after:content[' ']",
                display: "after:block",
                width: "after:w-full",
                position: "after:absolute",
                bottom: "after:-bottom-2.5",
                left: "left-0",
                borderWidth: "after:border-b-2",
                transition: "after:transition-transform after:duration-300",
              },
            },
          },
          sizes: {
            md: {
              container: {
                height: "h-11",
              },
              select: {
                fontSize: "text-sm",
                pt: "pt-4",
                pb: "pb-1.5",
              },
              label: {
                initial: {},
                states: {
                  close: {
                    lineHeight: "leading-tight",
                  },
                  open: {
                    lineHeight: "leading-tight",
                  },
                  withValue: {
                    lineHeight: "leading-tight",
                  },
                },
              },
            },
            lg: {
              container: {
                height: "h-12",
              },
              select: {
                fontSize: "text-sm",
                px: "px-px",
                pt: "pt-5",
                pb: "pb-2",
              },
              label: {
                initial: {},
                states: {
                  close: {
                    lineHeight: "leading-tight",
                  },
                  open: {
                    lineHeight: "leading-tight",
                  },
                  withValue: {
                    lineHeight: "leading-tight",
                  },
                },
              },
            },
          },
          colors: {
            select: {
              "blue-gray": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-blue-gray-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              gray: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-gray-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              brown: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-brown-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              "deep-orange": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-deep-orange-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              orange: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-orange-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              amber: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-amber-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              yellow: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-yellow-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              lime: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-lime-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              "light-green": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-light-green-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              green: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-green-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              teal: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-teal-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              cyan: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-cyan-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              "light-blue": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-light-blue-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              blue: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-blue-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              indigo: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-indigo-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              "deep-purple": {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-deep-purple-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              purple: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-purple-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              pink: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-pink-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
              red: {
                close: {
                  borderColor: "border-blue-gray-200",
                },
                open: {
                  borderColor: "border-red-500",
                },
                withValue: {
                  borderColor: "border-blue-gray-200",
                },
              },
            },
            label: {
              "blue-gray": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-gray-500",
                },
                open: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-gray-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-gray-50",
                },
              },
              gray: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-gray-500",
                },
                open: {
                  color: "text-gray-500",
                  after: "after:border-gray-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-gray-500",
                },
              },
              brown: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-brown-500",
                },
                open: {
                  color: "text-brown-500",
                  after: "after:border-brown-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-brown-500",
                },
              },
              "deep-orange": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-deep-orange-500",
                },
                open: {
                  color: "text-deep-orange-500",
                  after: "after:border-deep-orange-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-deep-orange-500",
                },
              },
              orange: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-orange-500",
                },
                open: {
                  color: "text-orange-500",
                  after: "after:border-orange-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-orange-500",
                },
              },
              amber: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-amber-500",
                },
                open: {
                  color: "text-amber-500",
                  after: "after:border-amber-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-amber-500",
                },
              },
              yellow: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-yellow-500",
                },
                open: {
                  color: "text-yellow-500",
                  after: "after:border-yellow-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-yellow-500",
                },
              },
              lime: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-lime-500",
                },
                open: {
                  color: "text-lime-500",
                  after: "after:border-lime-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-lime-500",
                },
              },
              "light-green": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-light-green-500",
                },
                open: {
                  color: "text-light-green-500",
                  after: "after:border-light-green-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-light-green-500",
                },
              },
              green: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-green-500",
                },
                open: {
                  color: "text-green-500",
                  after: "after:border-green-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-green-500",
                },
              },
              teal: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-teal-500",
                },
                open: {
                  color: "text-teal-500",
                  after: "after:border-teal-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-teal-500",
                },
              },
              cyan: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-cyan-500",
                },
                open: {
                  color: "text-cyan-500",
                  after: "after:border-cyan-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-cyan-500",
                },
              },
              "light-blue": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-light-blue-500",
                },
                open: {
                  color: "text-light-blue-500",
                  after: "after:border-light-blue-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-light-blue-500",
                },
              },
              blue: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-500",
                },
                open: {
                  color: "text-blue-500",
                  after: "after:border-blue-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-blue-500",
                },
              },
              indigo: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-indigo-500",
                },
                open: {
                  color: "text-indigo-500",
                  after: "after:border-indigo-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-indigo-500",
                },
              },
              "deep-purple": {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-deep-purple-500",
                },
                open: {
                  color: "text-deep-purple-500",
                  after: "after:border-deep-purple-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-deep-purple-500",
                },
              },
              purple: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-purple-500",
                },
                open: {
                  color: "text-purple-500",
                  after: "after:border-purple-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-purple-500",
                },
              },
              pink: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-pink-500",
                },
                open: {
                  color: "text-pink-500",
                  after: "after:border-pink-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-pink-500",
                },
              },
              red: {
                close: {
                  color: "text-blue-gray-500",
                  after: "after:border-red-500",
                },
                open: {
                  color: "text-red-500",
                  after: "after:border-red-500",
                },
                withValue: {
                  color: "text-blue-gray-500",
                  after: "after:border-red-500",
                },
              },
            },
          },
          states: {
            close: {
              select: {
                borderWidth: "border-b",
              },
              label: {
                fontSize: "text-sm",
                disabled: "peer-disabled:text-blue-gray-400",
                after: {
                  transform: "after:scale-x-0",
                },
              },
            },
            open: {
              select: {
                borderWidth: "border-b",
              },
              label: {
                fontSize: "text-sm",
                disabled: "peer-disabled:text-transparent",
                after: {
                  transform: "after:scale-x-100",
                },
              },
            },
            withValue: {
              select: {
                borderWidth: "border-b",
              },
              label: {
                fontSize: "text-sm",
                disabled: "peer-disabled:text-transparent",
                after: {
                  transform: "after:scale-x-0",
                },
              },
            },
          },
          error: {
            select: {
              initial: {},
              states: {
                close: {
                  borderColor: "border-red-500",
                },
                open: {
                  borderColor: "border-red-500",
                },
                withValue: {
                  borderColor: "border-red-500",
                },
              },
            },
            label: {
              initial: {},
              states: {
                close: {
                  color: "text-red-500",
                  after: "after:border-red-500",
                },
                open: {
                  color: "text-red-500",
                  after: "after:border-red-500",
                },
                withValue: {
                  color: "text-red-500",
                  after: "after:border-red-500",
                },
              },
            },
          },
          success: {
            select: {
              initial: {},
              states: {
                close: {
                  borderColor: "border-green-500",
                },
                open: {
                  borderColor: "border-green-500",
                },
                withValue: {
                  borderColor: "border-green-500",
                },
              },
            },
            label: {
              initial: {},
              states: {
                close: {
                  color: "text-green-500",
                  after: "after:border-green-500",
                },
                open: {
                  color: "text-green-500",
                  after: "after:border-green-500",
                },
                withValue: {
                  color: "text-green-500",
                  after: "after:border-green-500",
                },
              },
            },
          },
        },
      },
    },
  },
};

Explore More Tailwind CSS Examples

Looking for more select component examples? Check out our Ecommerce Sections from Material Tailwind Blocks.