Combobox overflow question

[tonge495]

Hi Paste team,

We are working on a few pages that use the combobox component. See examples below:

When there are a certain # of selections, the field gets taller and fills up vertical space to accommodate for the selections. Is there a cleaner way visually to display this, as this creates a lot of white space to the left/right of the component?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hello!

The Multiselect Combobox in Paste is designed to grow vertically to accommodate the selected options. This is done using Form Pills to represent each selection. However, if you find that this creates too much white space, you can limit the vertical resizing by providing a maxHeight prop to the Combobox. This will set a maximum height for the Combobox and if there are more pills than viewable at max height, users can vertically scroll to view all the selected options.

Here's an example of how you can use the maxHeight prop:

<Combobox
  items={items}
  maxHeight="size30" // Set the max height
  onSelectedItemChange={handleSelectedItemChange}
  selectedItem={selectedItem}
  label="Choose a Plan"
/>

Please note that the value for maxHeight should be a token from the Paste Design System's spacing scale.

I hope this helps! If you have any other questions, feel free to ask.

---

Here are some similar discussions:

• Combobox on Modal Issue (updated: 2023-01-25T23:01:25Z, similarity score: 0.88)
• Combo box - Use case adaptation (updated: 2023-06-07T16:39:35Z, similarity score: 0.87)
• Issues with MultiSelect Combobox (updated: 2023-08-31T16:14:32Z, similarity score: 0.87)