Combobox, error input field

[pamelahu]

I'm looking at this type of combo box and wondering if I can include a description for each answer choice...

Very similar to how each radio button option can have a description:

For Twilio.org's sign up page, I want to create an input field labeled "Organization type":

Public Benefit Nonprofit - 501(c)(3) or local equivalent
Mutual Benefit Nonprofit - Other 501(c) status or local equivalent
Social Enterprise - Public Benefit Corporation, B-Corp certified, L3C, or local equivalent
UN Agency - Designated UN Specialized Agency
Unregistered Nonprofit - Unincorporated groups or individuals with a public benefit use case
Other - Government entity, political organization, and more

We want the copy after the "-" (e.g. 501(c)(3) or local equivalent) to be a description since it's to help clarify the text before the "-" (e.g. Public Benefit Nonprofit)

I also noticed that the combo box above allows linking to external pages so I thought it could be helpful to link to external documentation for each organization type.

Does the combobox above suit the use case I'm describing?

---

Also, at the very bottom of my Figma file, I have a few variations on handling if users select "Other" for "Organization type" using input field error text / body text / error toast / normal toast. Wondering what the "correct" way to use the components are?

Basically, we're requiring that organizations have to be an organization type listed in the options we provide or they're ineligible for sign up. If they're ineligible, we still want to redirect them instead of just giving them a dead-end.

[kate-porter]

Hey @pamelahu - thanks for the questions!

Regarding your first question, yes, each Combobox list item can have a description just like you're describing. The example you shared a screenshot of is meant to show that you can customize the content within each Combobox list item to suit your needs (though, I admit, the docs aren't excellent at explaining that 😂 - we'll work on that). Share that example with your engineers along with a mock of what you'd like to achieve, and they should be able to use the optionTemplate prop to add the description to each list item.

Regarding your second question about having each Combobox item link to an external docs page on each organization, I don't actually think that's possible (again, the example on the docs site is misleading - I've made a note to update it). I'm confirming this piece with the team so I'll circle back with you, but I believe that the full click area of a given Combobox list item will select the item, so you won't also be able to have an external link out to another page, because the user wouldn't be able to click it.

Regarding your third question, if you are providing "Other" as an option in the dropdown, showing an error to the user if they select it doesn't feel quite right, because the user hasn't done anything wrong. Instead, you might consider either (a) not showing "Other" as an option, and have some type of informative callout or alert below the dropdown that says something like, "Don't see your organization type listed? Unfortunately, only organization types listed are eligible...etc."; or (b) keep "Other" as an option, and if selected, show an informative alert with the same messaging, rather than an error.

Let us know if you have any additional questions on this!

[kate-porter]

Okay, I checked in with the team on the second question about adding a link in a Combobox list item, and it actually is doable but requires a very specific implementation for it to be accessible. I'm working with the eng team to put together an example for you.

[andioneto]

@pamelahu Thank you for your patience. Please check out this implementation of a combobox with anchored options.

Let us know if you have any more questions and what you think.