# Richer select options

Published: August 9, 2026

Version: ^2.16.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_16_0_select_options_hero.png" alt="A compact visibility select with a wider dropdown showing Public and Private options with icons and descriptions" />

We've made a bunch of improvements to **Select**. Options can now have icons, descriptions, and avatars, and the dropdown itself can be positioned, aligned, and sized independently from the trigger.

Let's take a look.

## Icons and descriptions

Add an `icon` to make options easier to scan, or a `description` when a label needs a little more context. You can use either on its own or combine them:

```blade
<flux:select variant="listbox">
    <flux:select.option value="public" label="Public" icon="globe-alt" />
    <flux:select.option value="private" label="Private" description="Only invited users can access this." />
</flux:select>
```

Descriptions only appear while the dropdown is open, so the selected value stays nice and compact. Icons also support `icon:variant` and `icon:class` for further customization.

## Avatars

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_16_0_select_avatars.png" alt="An open user select showing four options with circular avatars" />

For user pickers, pass an image URL to the new `avatar` prop:

```blade
<flux:select variant="listbox" wire:model="assignee">
    <flux:select.option
        value="caleb"
        label="Caleb Porzio"
        avatar="https://unavatar.io/github/calebporzio"
    />

    <!-- ... -->
</flux:select>
```

You can pass `avatar:*` props straight through to the underlying Avatar component when you need more control.

Select components are one of the hardest things to get right in a UI kit, and we're proud of how flexible and capable Flux's select has become!

---

[Check out the select docs →](https://fluxui.dev/components/select)