# Icon in a select input

**URL:** <https://community.weweb.io/t/icon-in-a-select-input/14879>\
**Category:** How do I?\
**Created:** [December 9, 2024, 9:09pm UTC](https://community.weweb.io/t/icon-in-a-select-input/14879 "2024-12-09T21:09:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![wealthsyndy](https://avatars.discourse-cdn.com/v4/letter/w/48db29/32.png) [@wealthsyndy](https://community.weweb.io/u/wealthsyndy)\
**Post date:** [December 9, 2024, 9:09pm UTC](https://community.weweb.io/t/icon-in-a-select-input/14879/1 "2024-12-09T21:09:49Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [December 11, 2024, 4:34pm UTC](https://community.weweb.io/t/icon-in-a-select-input/14879/2 "2024-12-11T16:34:29Z")

</div>

Hey @wealthsyndy 👋

Just recorded this video for you: [Select for Prolet](https://www.tella.tv/video/select-for-prolet-0fag)

Let me know if that answers your use case 🙂

---

<div class="post-metadata">

**Author:** ![wealthsyndy](https://avatars.discourse-cdn.com/v4/letter/w/48db29/32.png) [@wealthsyndy](https://community.weweb.io/u/wealthsyndy)\
**Post date:** [December 11, 2024, 5:17pm UTC](https://community.weweb.io/t/icon-in-a-select-input/14879/3 "2024-12-11T17:17:51Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e41cd5c06f819d06ab493718eb8059b83c136900.png)

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

---

<div class="post-metadata">

**Author:** ![BenGiordano](https://avatars.discourse-cdn.com/v4/letter/b/c4cdca/32.png) [@BenGiordano](https://community.weweb.io/u/BenGiordano)\
**Post date:** [September 29, 2025, 7:22am UTC](https://community.weweb.io/t/icon-in-a-select-input/14879/4 "2025-09-29T07:22:06Z")

</div>

Hi Joyce and team 👋

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:

```auto
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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f6490dc7a16eda1de0d9f8e7b9d5dd8219a57626.png)

 ![img2](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f7fd528a5ad98c77c6719263ed8029c722fd2d6e.png)

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