The following props are available for select component. These are the custom props that come with we've added for the select component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
variant | Variant | Change input variant | outlined |
size | Size | Change input size | md |
color | Color | Change input color | blue |
label | string | Add label for input | '' |
error | boolean | Change input state to error | false |
success | boolean | Change input state to success | false |
arrow | node | Change select arrow icon | undefined |
value | string | Change selected value for select | undefined |
onChange | function | Return selected value when select value changed | undefined |
selected | function | Return selected element and it's index | undefined |
offset | Offset | Change select menu offset from it's input | 5 |
dismiss | Dismiss | Change dismiss listeners when clicking outside | undefined |
animate | Animate | Change select menu animation | undefined |
lockScroll | boolean | Lock page scrolling when select menu is opened | false |
labelProps | object | Add custom props for select label | undefined |
menuProps | object | Add custom props for select menu | undefined |
disabled | boolean | Disable select input | false |
className | string | Add custom className for select input | '' |
children | node | Add content for select | No default value 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 come with we've added for the select option component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
value | string | Add select option value, it works together with value props of select | undefined |
index | number | Add select option value | undefined |
disabled | boolean | Disable select option | false |
className | string | Add custom className for select option | '' |
children | node | Add content for select option | No default value 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 dismiss = {
enabled?: boolean;
escapeKey?: boolean;
referencePointerDown?: boolean;
outsidePointerDown?: boolean;
ancestorScroll?: boolean;
bubbles?: boolean;
};type animate = {
mount?: object;
unmount?: object;
};