I am using the Material UI Autoplete ponent and would like to have multiline chips. I am using chips to display some text, where there can be up to around 10 words in that text. I am aware that is not the intended purpose of chips but this generally fits really nicely into my UI so I'd like to stick with them.

That said, on mobile (e.g. iPhone 8), a chip with around 10 words will display something like "The first few words...", where there will be ellipsis instead of the remainder of the text.

I have looked into using the renderTags property (with a Typography element using word-wrap for the chip label) and have tried that out but haven't made any forward progress using that. Does anyone have any advice/code snippets where they have gotten this working?

I am using the Material UI Autoplete ponent and would like to have multiline chips. I am using chips to display some text, where there can be up to around 10 words in that text. I am aware that is not the intended purpose of chips but this generally fits really nicely into my UI so I'd like to stick with them.

That said, on mobile (e.g. iPhone 8), a chip with around 10 words will display something like "The first few words...", where there will be ellipsis instead of the remainder of the text.

I have looked into using the renderTags property (with a Typography element using word-wrap for the chip label) and have tried that out but haven't made any forward progress using that. Does anyone have any advice/code snippets where they have gotten this working?

• javascript
• css
• reactjs
• autoplete
• material-ui

1 Answer 1

I figured out how to do it. Here is example code with multiline chips working (https://codesandbox.io/s/material-demo-eg6mb?file=/demo.tsx:332-1082). The key features that allow this multiline functionality to work are setting the chip's height to be 100% and using a Typography element for the label with whitespace: normal:

<Autoplete
  multiple
  id="fixed-tags-demo"
  options={top100Films}
  getOptionLabel={option => option.title}
  defaultValue={[top100Films[6], top100Films[13], top100Films[0]]}
  renderTags={(value, getTagProps) =>
    value.map((option, index) => (
      <Chip
        label={<Typography style={{whiteSpace: 'normal'}}>{option.title}</Typography>}
        {...getTagProps({ index })}
        disabled={index === 0}
        style={{height:"100%"}}
      />
    ))
  }
  style={{ width: 300 }}
  renderInput={params => (
    <TextField
      {...params}
      label="Fixed tag"
      variant="outlined"
      placeholder="Favorites"
    />
  )}
/>