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>
);
}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>
);
}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>
);
}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>
);
}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>
);
}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>
);
}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>
);
}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>
);
}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-countriesimport 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>
);
}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.
| Attribute | Type | Description | Default |
|---|---|---|---|
variant | Variant | Change select variant | outlined |
size | Size | Change select size | md |
color | Color | Change select color | gray |
label | string | Add label for select | '' |
error | boolean | Change select state to error | false |
success | boolean | Change select 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 |
containerProps | object | Add custom props for select container | undefined |
labelProps | object | Add custom props for select label | undefined |
menuProps | object | Add custom props for select menu | undefined |
disabled | boolean | Disable select | false |
name | string | Add name for select | false |
className | string | Add custom className for select | '' |
children | node | Add content for select | No default value it's a required prop. |
import type { SelectProps } from "@material-tailwind/react";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.
| 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 it's a required prop. |
import type { SelectOptionProps } from "@material-tailwind/react";type variant = "standard" | "outlined" | "static";type size = "md" | "lg";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";type offset =
| number
| {
mainAxis?: number;
crossAxis?: number;
alignmentAxis?: number | null;
};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;
};
};type animate = {
mount?: object;
unmount?: object;
};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.
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;
};
};
}import type { SelectStylesType } from "@material-tailwind/react";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;
}import type { SelectVariantStylesType } from "@material-tailwind/react";interface SelectSizeStylesType {
container: object;
select: object;
label: {
initial: object;
states: {
close: object;
open: object;
withValue: object;
};
};
}import type { SelectSizeStylesType } from "@material-tailwind/react";interface SelectStatesStylesType {
close: {
select: object;
label: object;
};
open: {
select: object;
label: object;
};
withValue: {
select: object;
label: object;
};
}import type { SelectStatesStylesType } from "@material-tailwind/react";interface SelectStateStylesType {
select: {
initial: object;
states: {
close: object;
open: object;
withValue: object;
};
};
label: {
initial: object;
states: {
close: object;
open: object;
withValue: object;
};
};
}import type { SelectStateStylesType } from "@material-tailwind/react";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",
},
},
},
},
},
},
},
},
};Looking for more select component examples? Check out our Ecommerce Sections from Material Tailwind Blocks.