Skip to main content

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, SelectProps 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"
SelectProps={{
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;