Tailwind CSS 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;
      referencePointerDown: boolean;
      outsidePointerDown: boolean;
      ancestorScroll: boolean;
      bubbles: 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: {
    styles: {
      base: {
        container: {
          position: "relative",
          width: "w-full",
          minWidth: "min-w-[200px]",
        },
      },
    },
  },
};

Related

Examples

Checkout different examples for select components.

Props

Learn more about props definition and types of select components.

Edit this page on Github