Select

The customized CustomTextField component leverages MUI's built-in select prop to create select functionality, offering a dropdown select option that combines MUI's functionality with our custom aesthetics.

Overview

To use the CustomTextField as a select dropdown, you simply need to pass the select prop to the component. The select prop makes the text field use the Select component internally.

Additionally, select of slotProps prop allows for the further customization of the select text field, accepting an object with some properties that can be used to customize the select component.

How to use

import CustomTextField from '@core/components/mui/TextField'
import MenuItem from "@mui/material/MenuItem";

const selectCustom = () => {
  return (
    <CustomTextField
      select
      fullWidth
      defaultValue=""
      label="Default"
      id="custom-select"
      slotProps={{
        select: {
          displayEmpty: true,
          multiple: true
        }
      }}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </CustomTextField>
  )
}

export default selectCustom;