Icon in a select input

Ask us anything How do I?
1

I would like to have an icon next to each item in my input drop down to indicate what the “status” of this item is. The issue is when I pass the object to the Input I cannot access the “status” attribute to create the "free layout " version of the “option”.

This is an example list of items passed:

return [{
“id”: 68,
“label”: “Label 1”,
“status”: “current”
},
{
“id”: 82,
“label”: “label 2”,
“status”: “potential”
}
]

Thanks!

2

Hey @wealthsyndy :wave:

Just recorded this video for you: Select for Prolet

Let me know if that answers your use case :slight_smile:

3

Thank you so much for the video! In the beginning I thought I was going crazy because I was not seeing the “data” with extra field, but than I tried it outside of a component. I should have mentioned that the input was in a component. So here is the solution if anyone is wondering in the future:

  • if you use the input in a component you need to ensure that the schema for the items on component level is defined to accept more than 2 values for mapping.
    image
    image342×353 4.76 KB

So the issue really was that the component was not passing through the data to the options. This solved my issue, thanks @Joyce !