How to include placeholder in select component in Material UI@Next #11069

NayanSrivastav · 2018-04-19T14:59:17Z

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Select field should show Placeholder text.

Current Behavior

Placeholder text should be visible when passed to Input tag.

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.42
React	16.1.0
browser	Chrome( 65.0.3325.181)

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2018-04-20T09:55:12Z

@NayanSrivastav This concern has already been raised in #8875. As far as the discussion went, the conclusion was that the placeholder property for a select component doesn't make sense. With the given information, it's not something we plan on addressing. Instead, @sakulstra has raised some great alternatives: #8875 (comment)

import React from "react";
import { render } from "react-dom";
import { Select } from "material-ui";
import { withStyles } from "material-ui/styles";
import { MenuItem } from 'material-ui/Menu';
import classNames from "classnames";

class App extends React.Component {
  state = {
      select: 'none'
  }

  handleChange = field => e => {
    this.setState({[field]: e.target.value})
  }

  render() {
    return (
      <div>
        <Select native defaultValue='none'>
          <option value="none" disabled>
            uncontrolled Native placeholder
          </option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select native value={this.state.select} onChange={this.handleChange('select')}>
          <option value="none" disabled>
            controlled Native placeholder
          </option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select native value={this.state.select} onChange={this.handleChange('select')}>
          {this.state.select === 'none' && <option value="none" disabled>
            Autohide after selection
          </option>}
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select value={this.state.select} onChange={this.handleChange('select')}>
          <MenuItem value="none" disabled>
            controlled Non native placeholder
          </MenuItem>
          <MenuItem value="1">Option 1</MenuItem>
          <MenuItem value="2">Option 2</MenuItem>
          <MenuItem value="3">Option 3</MenuItem>
        </Select>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/wqq7059oq8

oliviertassinari · 2018-04-20T09:56:08Z

@NayanSrivastav Now, maybe it's a matter on improving the documentation or adding some warnings when people are trying to provide a placeholder.

NayanSrivastav · 2018-04-20T11:15:02Z

@oliviertassinari I think alternatives suggested by @sakulstra are great and yeah document must be improved so that folks coming from stable mui get clear indication that placeholder are not supported directly.

Thanks for prompt reply and closing it now.

hadasmaimon · 2020-04-29T16:01:37Z

@oliviertassinari this is a great alternative,
But can the placeholder option be grayed out, instead of being black?

select component with placeholder option:

textField placeholder (inside an autocomplete):

alexanderkho · 2020-05-05T18:40:26Z

@hadasmaimon I'm trying to do this as well, did you find a solution?

hadasmaimon · 2020-05-05T19:00:43Z

@hadasmaimon I'm trying to do this as well, did you find a solution?

@alexanderkho
I sent a class name that set the color to gray, in case the value is equal to the default value

const defaultValue = translate('Select');

const isDefaultValue = value === defaultValue;
const selectClasses = classNames(className, { 'class-font-colour-gray': isDefaultValue });

<Select
   className={selectClasses}
   ...
/>

cazroam · 2020-08-06T23:25:16Z

You can override the theme styling with the following code:
MuiSelect: { root: { '&.MuiFilledInput-input': { color: 'grey', }, }, },

this will, however, make any selected item grey also, but that is my use-case so I'm ok with that 👍

Johnrobmiller · 2021-04-11T23:34:53Z

@hadasmaimon I'm trying to do this as well, did you find a solution?

@alexanderkho
I sent a class name that set the color to gray, in case the value is equal to the default value
const defaultValue = translate('Select');

const isDefaultValue = value === defaultValue;
const selectClasses = classNames(className, { 'class-font-colour-gray': isDefaultValue });

<Select
   className={selectClasses}
   ...
/>

Great ideas; I got your solution up and running on my own project. I like the idea of using React's useState() and useEffect() to dynamically change "useStyles()" properties (which I am assuming is what you did, although it is not in your code).

slamjs · 2021-07-21T12:50:07Z

you can use the following

displayEmpty={true}
renderValue={value => value?.length ? Array.isArray(value) ? value.join(', ') : value : 'placeholder'}

artidataio · 2021-10-05T09:50:31Z

I came here from TextField with the select props set to true. I was wondering why the placeholder doesn't show up. Apparently it's not supported. Maybe the docs in the TextField section needs to be updated too.

Skagoo · 2021-10-28T21:50:33Z

you can use the following

displayEmpty={true}
renderValue={value => value?.length ? Array.isArray(value) ? value.join(', ') : value : 'placeholder'}

This is actually a very minimal and nice workaround, nice one!

ahuseyn · 2021-11-15T07:34:55Z

I prefer more native looking placeholder with InputLabel :

      const [itemType, setItemType] = useState("");
      //...

      <FormControl fullWidth>
        {itemType === "" ? (
          <InputLabel disableAnimation shrink={false} focused={false} id='item_type_label'>
            Item Type
          </InputLabel>
        ) : null}

        <Select id='item_type' labelId='item_type_label' value={itemType} onChange={itemTypeChange}>
          <MenuItem value={false}>Private</MenuItem>
          <MenuItem value={true}>Public</MenuItem>
        </Select>
      </FormControl>

akramnarejo · 2021-12-27T10:43:59Z

just provide following attributes into select
displayEmpty
renderValue={value !== "" ? undefined : () => "placeholder text"}

MakakWasTaken · 2022-01-18T14:16:01Z

just provide following attributes into select displayEmpty renderValue={value !== "" ? undefined : () => "placeholder text"}

This should instead be the following:

displayEmpty
renderValue={(value) => (value !== '' ? value : 'Placeholder text')}

Because the example you provided will cause the value not to show when it is selected. Also making the placeholder functional did not work for me.

It should also be mentioned that this only renders the value of the component. Not the label.

sgentile · 2022-05-19T18:30:27Z

you can use the following

displayEmpty={true}
renderValue={value => value?.length ? Array.isArray(value) ? value.join(', ') : value : 'placeholder'}

but if your label is different than your value - it will show the value instead of the label

mixa9269 · 2022-07-13T20:48:59Z

Thank you all for your solutions!
I created a custom Select with a placeholder based on MUI select.

const Select = ({
  classes: {
    placeholder: placeholderClass,
    ...otherClasses
  },
  children,
  placeholder,
  multiple,
  renderValue: renderValueProp,
  ...otherProps
}) => {
  const renderValue = useCallback((value) => {
    if (value === '' || value?.length === 0) {
      return <span className={placeholderClass}>{placeholder}</span>;
    }

    const childrenArray = React.Children.toArray(children);

    if (multiple && Array.isArray(value)) {
      return childrenArray
        .filter(child => value.some(v => v === child.props.value))
        .map(child => child.props.children)
        .join(', ');
    }

    return childrenArray.find(child => child.props.value === value)?.props.children;
  }, [children, multiple, placeholder, placeholderClass]);

  return (
    <MUISelect
      classes={otherClasses}
      renderValue={renderValueProp || renderValue}
      multiple={multiple}
      {...otherProps}
    >
      {children}
    </MUISelect>
  );
};

Select.defaultProps = {
  displayEmpty: true,
};

placeholder: {
    opacity: 0.42, // if you use default theme
},

teetotum · 2022-09-06T21:40:56Z

I don't want to overwrite renderValue because I would lose the original behavior covering single and multiselect and would need to mimic the original behavior.
I think I found a workable css solution:

<Select
    sx={{
        '& .MuiSelect-select .notranslate::after': placeholder
            ? {
                content: `"${placeholder}"`,
                opacity: 0.42,
              }
            : {},
    }}
>
    {options}
</Select>

HyoilKim · 2022-10-14T05:06:34Z

displayEmpty
renderValue={(value) => (value !== '' ? value : 'Placeholder text')}

It doesn't work for me. An error appears. So I use renderValue={value === '' ? () => placeholder : undefined}

  Overload 1 of 2, '(props: Pick<SelectProps, "className" | "style" | "innerRef" | "ref" | "input" | "label" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 282 more ... | "SelectDisplayProps"> & StyledComponentProps<...>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '(value: unknown) => unknown' is not assignable to type '(value: unknown) => ReactNode'.
      Type 'unknown' is not assignable to type 'ReactNode'.
        Type 'unknown' is not assignable to type 'ReactPortal'.
  Overload 2 of 2, '(props: PropsWithChildren<Pick<SelectProps, "className" | "style" | "innerRef" | "ref" | "input" | "label" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 282 more ... | "SelectDisplayProps"> & StyledComponentProps<...>>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '(value: unknown) => unknown' is not assignable to type '(value: unknown) => ReactNode'.```

MakakWasTaken · 2022-10-14T12:19:20Z

displayEmpty
renderValue={(value) => (value !== '' ? value : 'Placeholder text')}

It doesn't work for me. An error appears. So I use renderValue={value === '' ? () => placeholder : undefined}

  Overload 1 of 2, '(props: Pick<SelectProps, "className" | "style" | "innerRef" | "ref" | "input" | "label" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 282 more ... | "SelectDisplayProps"> & StyledComponentProps<...>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '(value: unknown) => unknown' is not assignable to type '(value: unknown) => ReactNode'.
      Type 'unknown' is not assignable to type 'ReactNode'.
        Type 'unknown' is not assignable to type 'ReactPortal'.
  Overload 2 of 2, '(props: PropsWithChildren<Pick<SelectProps, "className" | "style" | "innerRef" | "ref" | "input" | "label" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 282 more ... | "SelectDisplayProps"> & StyledComponentProps<...>>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '(value: unknown) => unknown' is not assignable to type '(value: unknown) => ReactNode'.```

This seems like a typescript error, try this instead:

displayEmpty
renderValue={(value: string): React.ReactNode =>
  (value !== '' ? value : 'Placeholder text') as string
}

HyoilKim · 2022-10-14T13:17:48Z

Thank you! But, I have still an unresolved thing.

Because the example you provided will cause the value not to show when it is selected.

It doesn't be reproduced. For me, the value is shown when it's selected

KrisKnez · 2022-12-18T13:21:08Z

<Select
  defaultValue="default"
  sx={{
    '& input[value="default"] ~ .MuiSelect-select': {
      color: "#CCC",
    },
  }}
>
  <MenuItem value="default" sx={{ display: "none" }}>
    Filter users
  </MenuItem>
  <MenuItem value="allUsers">All users</MenuItem>
  <MenuItem value="blockedUsers">Blocked users</MenuItem>
</Select>;

This, in my opinion, is an elegant solution to this, unfortunately, it does not work because for some reason the input is not the first element in the Select component.
When using the input to store the state like this, the input should be the first element inside the block.
In CSS the ~ selector only works for sibling elements that come after the target element, in our situation the .MuiSelect-select element is before the input element.

Pareder · 2023-01-11T15:50:57Z

I have some related issue. If I am using disabled MenuItem as a placeholder, opening Select will highlight the next item after disabled one as focused. Reproduction link: https://codesandbox.io/s/dazzling-black-z1ner6?file=/src/App.js. Is it possible not to focus the next item?

Even in your example https://mui.com/material-ui/react-select/#placeholder the first option after placeholder is focused on select opening.

croraf · 2023-07-22T12:41:29Z

I think there is a clear need for this and not having this prop implemented already is very strange and arbitrary decision.

Just from the number of comments and likes on this thread.
The explainations why this is not needed in the comments in [Select] placeholder prop #8875 don't make sense (or make sense just in some cases).

A. For example in the Select placeholder we want to tell the user how to interact with the field "Select one" or "Choose one" or "Pick one from the list" (to give better distinction from the other fields which might have a similar placeholder like "Pick a date", "Pick a time", "Enter text", "Choose one or many", "Type or select from the list", ....).

B. Some might want to show the mentioned placeholder "Choose one" only in case the selection is required, so it adds another visual clue that the field is required along with the star.
Consistency. In all other fields in our application (text fields, date pickers, time pickers, autocompletes, ...) except this one type we have a placeholder. (In our case the placeholder tells the user how to interact with the filed as mentioned in 2A ).

dev0T · 2023-09-08T19:04:55Z

I think there is a clear need for this and not having this prop implemented already is very strange and arbitrary decision.

Completely agree. For such a robust and heavy library, this is an use case to be expected and implemented. The example provided in the documentation shows this is a flaw and is anything but elegant.

The solutions provided here might work but it doesn't feel correct using such workarounds in corporate apps considering readability.

damjanvucina · 2023-09-19T19:03:19Z

Here's my neat little trick, just render this alongside the Select component:

          <FormLabel
            style={{
              marginLeft: '0.71em',
              marginTop: '-0.71em',
              paddingLeft: '0.44em',
              paddingRight: '0.44em',
              zIndex: 2,
              backgroundColor: 'white',
              position: 'absolute',
              fontSize: '0.75em',
            }}
          >
            {placeholder}
          </FormLabel>

This will make the select component's border box to have a placeholder at all times, so wrap the above code in a condition to only be rendered if the select is empty.

croraf · 2023-09-22T13:22:53Z

@damjanvucina Although not ideal, I think your soluton might serve as a temporary hack.

I just modified it a bit to fit better (one thing is that FormLabel renders label which does mess the layout):

{!value && !label && placeholder && (
        <div
          style={{
            top: "0.25em",
            zIndex: 2,
            backgroundColor: "transparent",
            position: "absolute",
            fontSize: "1em",
            color: "#BBB",
            fontWeight: "400",
            pointerEvents: "none",
          }}
        >
          {placeholder}
        </div>
)}

UntamedLotus · 2023-10-17T15:07:05Z

@sgentile

you can use the following
displayEmpty={true}
renderValue={value => value?.length ? Array.isArray(value) ? value.join(', ') : value : 'placeholder'}
but if your label is different than your value - it will show the value instead of the label

Thanks😊. Works for me. I styled it after wrapping the string "placeholder" into span tag.

Rafdadoumont · 2024-02-22T15:21:28Z

Here is an easy workaround

displayEmpty 
renderValue={value !== "" ? undefined : () => <div style={{color:"#B1B1B1"}}>Placeholder</div>

AnatolyGavrilov · 2024-06-03T19:50:57Z

@NayanSrivastav This concern has already been raised in #8875. As far as the discussion went, the conclusion was that the placeholder property for a select component doesn't make sense. With the given information, it's not something we plan on addressing. Instead, @sakulstra has raised some great alternatives: #8875 (comment)

import React from "react";
import { render } from "react-dom";
import { Select } from "material-ui";
import { withStyles } from "material-ui/styles";
import { MenuItem } from 'material-ui/Menu';
import classNames from "classnames";

class App extends React.Component {
  state = {
      select: 'none'
  }

  handleChange = field => e => {
    this.setState({[field]: e.target.value})
  }

  render() {
    return (
      <div>
        <Select native defaultValue='none'>
          <option value="none" disabled>
            uncontrolled Native placeholder
          </option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select native value={this.state.select} onChange={this.handleChange('select')}>
          <option value="none" disabled>
            controlled Native placeholder
          </option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select native value={this.state.select} onChange={this.handleChange('select')}>
          {this.state.select === 'none' && <option value="none" disabled>
            Autohide after selection
          </option>}
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select value={this.state.select} onChange={this.handleChange('select')}>
          <MenuItem value="none" disabled>
            controlled Non native placeholder
          </MenuItem>
          <MenuItem value="1">Option 1</MenuItem>
          <MenuItem value="2">Option 2</MenuItem>
          <MenuItem value="3">Option 3</MenuItem>
        </Select>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/wqq7059oq8

Can you explain please why you said MUI select placeholder doesn't make sens?

oliviertassinari added the out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future) label Apr 20, 2018

NayanSrivastav closed this as completed Apr 20, 2018

oliviertassinari added the component: select This is the name of the generic UI component, not the React module! label Apr 20, 2018

snyk-bot mentioned this issue Mar 7, 2020

[Snyk] Fix for 1 vulnerabilities nbv1982/material-ui#10

Open

michalsidzej mentioned this issue Mar 4, 2022

Feature/agregator add change directiton BabelFishProtocol/babelfish-dapp#37

Merged

slax57 mentioned this issue Dec 22, 2022

Ability to add a placeholder for SelectInput marmelab/react-admin#8529

Closed

hzhz mentioned this issue Nov 30, 2023

[Snyk] Fix for 1 vulnerabilities hzhz/material-ui#96

Open

jwalkerinterpres mentioned this issue Dec 29, 2023

[material-ui][Select] Documentation improvement opportunities #40364

Open

2 tasks

xxxjinn mentioned this issue Aug 26, 2024

[view] 상단 branch select style 수정 githru/githru-vscode-ext#665

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to include placeholder in select component in Material UI@Next #11069

How to include placeholder in select component in Material UI@Next #11069

NayanSrivastav commented Apr 19, 2018

oliviertassinari commented Apr 20, 2018

oliviertassinari commented Apr 20, 2018 •

edited

Loading

NayanSrivastav commented Apr 20, 2018

hadasmaimon commented Apr 29, 2020 •

edited

Loading

alexanderkho commented May 5, 2020

hadasmaimon commented May 5, 2020 •

edited

Loading

cazroam commented Aug 6, 2020 •

edited

Loading

Johnrobmiller commented Apr 11, 2021 •

edited

Loading

slamjs commented Jul 21, 2021

artidataio commented Oct 5, 2021 •

edited

Loading

Skagoo commented Oct 28, 2021

ahuseyn commented Nov 15, 2021

akramnarejo commented Dec 27, 2021 •

edited

Loading

MakakWasTaken commented Jan 18, 2022 •

edited

Loading

sgentile commented May 19, 2022

mixa9269 commented Jul 13, 2022

teetotum commented Sep 6, 2022 •

edited

Loading

HyoilKim commented Oct 14, 2022 •

edited

Loading

MakakWasTaken commented Oct 14, 2022

HyoilKim commented Oct 14, 2022

KrisKnez commented Dec 18, 2022

Pareder commented Jan 11, 2023 •

edited

Loading

croraf commented Jul 22, 2023 •

edited

Loading

dev0T commented Sep 8, 2023 •

edited

Loading

damjanvucina commented Sep 19, 2023 •

edited

Loading

croraf commented Sep 22, 2023 •

edited

Loading

UntamedLotus commented Oct 17, 2023 •

edited

Loading

Rafdadoumont commented Feb 22, 2024 •

edited

Loading

AnatolyGavrilov commented Jun 3, 2024 •

edited

Loading

How to include placeholder in select component in Material UI@Next #11069

How to include placeholder in select component in Material UI@Next #11069

Comments

NayanSrivastav commented Apr 19, 2018

Expected Behavior

Current Behavior

Your Environment

oliviertassinari commented Apr 20, 2018

oliviertassinari commented Apr 20, 2018 • edited Loading

NayanSrivastav commented Apr 20, 2018

hadasmaimon commented Apr 29, 2020 • edited Loading

alexanderkho commented May 5, 2020

hadasmaimon commented May 5, 2020 • edited Loading

cazroam commented Aug 6, 2020 • edited Loading

Johnrobmiller commented Apr 11, 2021 • edited Loading

slamjs commented Jul 21, 2021

artidataio commented Oct 5, 2021 • edited Loading

Skagoo commented Oct 28, 2021

ahuseyn commented Nov 15, 2021

akramnarejo commented Dec 27, 2021 • edited Loading

MakakWasTaken commented Jan 18, 2022 • edited Loading

sgentile commented May 19, 2022

mixa9269 commented Jul 13, 2022

teetotum commented Sep 6, 2022 • edited Loading

HyoilKim commented Oct 14, 2022 • edited Loading

MakakWasTaken commented Oct 14, 2022

HyoilKim commented Oct 14, 2022

KrisKnez commented Dec 18, 2022

Pareder commented Jan 11, 2023 • edited Loading

croraf commented Jul 22, 2023 • edited Loading

dev0T commented Sep 8, 2023 • edited Loading

damjanvucina commented Sep 19, 2023 • edited Loading

croraf commented Sep 22, 2023 • edited Loading

UntamedLotus commented Oct 17, 2023 • edited Loading

Rafdadoumont commented Feb 22, 2024 • edited Loading

AnatolyGavrilov commented Jun 3, 2024 • edited Loading

oliviertassinari commented Apr 20, 2018 •

edited

Loading

hadasmaimon commented Apr 29, 2020 •

edited

Loading

hadasmaimon commented May 5, 2020 •

edited

Loading

cazroam commented Aug 6, 2020 •

edited

Loading

Johnrobmiller commented Apr 11, 2021 •

edited

Loading

artidataio commented Oct 5, 2021 •

edited

Loading

akramnarejo commented Dec 27, 2021 •

edited

Loading

MakakWasTaken commented Jan 18, 2022 •

edited

Loading

teetotum commented Sep 6, 2022 •

edited

Loading

HyoilKim commented Oct 14, 2022 •

edited

Loading

Pareder commented Jan 11, 2023 •

edited

Loading

croraf commented Jul 22, 2023 •

edited

Loading

dev0T commented Sep 8, 2023 •

edited

Loading

damjanvucina commented Sep 19, 2023 •

edited

Loading

croraf commented Sep 22, 2023 •

edited

Loading

UntamedLotus commented Oct 17, 2023 •

edited

Loading

Rafdadoumont commented Feb 22, 2024 •

edited

Loading

AnatolyGavrilov commented Jun 3, 2024 •

edited

Loading