Multiple select inputs on form

[lgalloherran]

Hey Team,
We are implementing a for that has multiple choice dropdown and I wanted to know if the option are long, Can we shorten the letters on the badges or, do we have to leave them complete. (see examples below)

SHORT VERSION

WORST-CASE COMPLETE VERSION

MID-POINT CASE COMPLETE VERSION

[loreina]

Hi @lgalloherran,

We have a new Multi-select Combobox that's available in Figma and will be available in code in the next week or so. With this design, the selection will show up as pills within the input field. They span to the width of the field and will wrap to the next line if the pill needs more space.

You could also use our Truncate component so the pills would be truncated at a certain character length. On hover, the entire string of text will appear. We would caution against truncating text though as it limits readability of the selection and visually hides information on a page where a user might have to spend more time to be able to see the full text/selection.

Let us know if you have any questions! Thanks!