Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


0.2.11 • Public • Published

react-searchable-select-mui · travis build npm version

A simple custom select component including a searchfield.

Here is a Demo:https://dccs-it-business-solutions.github.io/react-searchable-select-mui/


You should install react-searchable-select-mui with npm or yarn:

npm install @dccs/react-searchable-select-mui


yarn add @dccs/react-searchable-select-mui

This command will download and install react-searchable-select-mui

Peer Dependencies:

npm install @material-ui/core

How it works

SearchableSelect renders the following simplified structure:

    <TextField />
    <MenuItem>Remove Selection</MenuItem>
    <MenuItem>Option 1</MenuItem>
    <MenuItem>Option 2</MenuItem>
    <MenuItem>Option X</MenuItem>
  <FormHelperText />

All Material UI-Select Props get passed to the Select Component https://material-ui.com/api/select/

Native is not supported.

Multiple is not supported yet.

Additional Props:

Name Type Description
label string Label of the Select Component
searchFieldPlaceholder string Gets passed to the placeholder property of . Default: "Search..."
removeSelectionText string Text für the Remove Selection MenuItem. Default: "Remove selection"
options KeyValuePair[] or any[] Options to render. By default it expects an array like this: [{key:1, value:"Entry 1"}, {key:2, value:"Entry 2"}].
keyPropFn (option:KeyValuePair or any)=>any Required function if you want to use a different property names for key and value. If you want to use id instead of key: keyPropFn={(option: any) => option.id}
valuePropFn (option:KeyValuePair or any)=>any Required function if you want to use a different property names for key and value. If you want to use name instead of value: valuePropFn={(option: any) => option.name}
formControlProps https://material-ui.com/api/form-control/ Props that get passed to the formcontrol component
formHelperTextProps https://material-ui.com/api/form-helper-text/ Props that get passed to the FormHelperText component
showAll boolean If true it shows all available options. Undefined or false shows 20 per default
maxVisibleOptions number Set the number of visible options to show. (Choose number below 50 since MUI-MenuItems are very laggy)
const Example = () => {
  const [value, setValue] = React.useState<unknown>();
  const handleChange = (
    event: React.ChangeEvent<{ name?: string; value: unknown }>
  ) => {
  return (
      label="Searchable Select"
        { id: 1, value: "Entry 1" },
        { id: 2, value: "Entry 2" },
        { id: 3, value: "Entry 3" }

With Custom Prop Names

  label="Searchable Select"
    { name: 1, property: "Entry 1" },
    { name: 2, property: "Entry 2" },
    { name: 3, property: "Entry 3" }
  keyPropFn={(option: any) => option.name}
  valuePropFn={(option: any) => option.property}



@dccs/react-searchable-select-mui is MIT licensed


npm i @dccs/react-searchable-select-mui

DownloadsWeekly Downloads






Unpacked Size

4.56 MB

Total Files


Last publish


  • avatar