reach/reach-ui

Option component with value different than text shown

andresgutgon opened this issue · 1 comments

❓Question

Hi, I'm using the combobox component and is working great.

My question is that if is possible to pass a different value than the text that is shown in the option.

My use case is select a list of slug but show a list of name.

type Skill {
  name: string
  slug: string 
}
const options: Skill[] = // My skills here

image

I want to do this because onSelect (value?: string) I want to pick the slug. But visually I would like to show the name

I guess I could do this manually like this
image

But I would lost the nice highlight you provide in OptionText

Ok I think I found a solution in this issue #627 (comment)

The solution is to do my own <CustomOptionText /> component.
Please let me know if there is a better solution

I'll auto close this issue. Sorry for the noise 🙏