Multi-Select Combobox icons

[ceyerkes]

Hi! I'm not sure if this is a bug, but I'm seeing a weird behavior with the multi-select combobox, in that I can't see a way to turn off/change prefix and suffix icons that are the default for this component, specifically within the form component. I don't seem to have the same issue when dragging in the component by itself.

[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.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Icon options for Listbox item? (updated: 12/18/2024, similarity score: 85%)
• Multi-select Combobox Bug - Placeholder text cropped (updated: 10/17/2023, similarity score: 84%)
• Issues with MultiSelect Combobox (updated: 08/31/2023, similarity score: 83%)

[dosubot[bot]]

To turn off or change the default prefix and suffix icons in the multi-select combobox within the form component, you can use the insertBefore and insertAfter props of the MultiselectCombobox component. These props allow you to customize what appears before and after the input field.

To remove the prefix and suffix, set these props to null:

<MultiselectCombobox
  items={groupedItems}
  groupItemsBy="letter"
  labelText="Choose a letter"
  selectedItemsLabelText="Selected letters:"
  helpText="Now I know my ABCs, next time won't you sing with me?"
  optionTemplate={(item: GroupedItem) => <div>{item.number}</div>}
  itemToString={(item: GroupedItem) => (item ? `${item.number}` : "")}
  insertBefore={null} // Remove prefix
  insertAfter={null}  // Remove suffix
  initialSelectedItems={initialSelectedGroupedItems}
/>

To change the prefix and suffix, provide your own React elements to these props. For example:

<MultiselectCombobox
  items={groupedItems}
  groupItemsBy="letter"
  labelText="Choose a letter"
  selectedItemsLabelText="Selected letters:"
  helpText="Now I know my ABCs, next time won't you sing with me?"
  optionTemplate={(item: GroupedItem) => <div>{item.number}</div>}
  itemToString={(item: GroupedItem) => (item ? `${item.number}` : "")}
  insertBefore={<Text as="span">Z</Text>} // Custom prefix
  insertAfter={<InformationIcon decorative={false} size="sizeIcon20" title="Get more info" />}  // Custom suffix
  initialSelectedItems={initialSelectedGroupedItems}
/>

This approach allows you to fully customize the appearance of the combobox by inserting any React component as a prefix or suffix ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}