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 !

4

Hi Joyce and team :waving_hand:

I’m trying to build a “people picker” using the Select input where each option shows:

  • a circular avatar image

  • the person’s name (label)

  • optionally a small status pill (e.g., “Active”, “Pending”)

I saw your video reply in this thread (“Select for Prolet”), where you switch the Select’s Layout type to Free layout to design a custom option with extra UI elements (screenshot attached as img1).

However, in my editor I don’t see the Layout type property on the Select component (screenshot img2). My panel only shows the usual “Options / Label per item / Value per item / Disabled per item / Initial value”, but no layout control.

Questions

  1. Is Layout type (Free layout) behind a feature flag, in beta, or only available on a specific Select variant (e.g., Multi-select vs Select, or a newer component)?

  2. If it’s been renamed or moved, where can I find it in the latest UI?

  3. If it’s not available yet on my workspace, what’s the recommended workaround to render an avatar + label + status inside each option? (e.g., custom component, different input, or a templating trick?)

  4. When using free/custom layout for options, how do we access the full option object (e.g., { id, label, avatar_url, status }) inside the option template? A small example formula would be super helpful.

  5. Any performance tips for 200–500 options (virtualization / lazy loading) to keep the dropdown smooth?

My data
I’m passing an array like:

return [
  { id: 'u_1', label: 'Alice Johnson', avatar_url: 'https://…/alice.jpg', status: 'active' },
  { id: 'u_2', label: 'Bob Rossi',    avatar_url: 'https://…/bob.jpg',   status: 'pending' }
];

Goal: show the avatar image left, name as main text, and a small status chip on the right in each option.

Thanks a ton for the guidance!
— Ben

img1
img11127×585 127 KB

img2
img2313×637 26.1 KB

(Attachments: img1 – tutorial UI with “Layout type”; img2 – my UI without that property)