Form
Select
Rich dropdown select with user avatars, role, status badges, and email display.
Note
All presented components are responsive and compatible with Tailwind CSS. Make sure Tailwind is configured in your project to use them.
User Select with Avatar and Status
A rich dropdown select that displays user profiles inside both the trigger and each option. Each item shows an avatar image, name, role, colored status badge (online/away/busy/offline), and email address. The selected user is rendered in the trigger with the same avatar and role info. Supports controlled and uncontrolled modes with an optional label.
Props Reference
| Prop | Type | Description | Default |
|---|---|---|---|
formName | string | Unique identifier used for the label htmlFor | required |
label | string | Label text displayed above the select | 'Users' |
value | string | Controlled selected value (user ID) | undefined |
onValueChange | (value: string) => void | Callback fired when a user is selected | undefined |
existingValues | string | Pre-selected user ID when using uncontrolled mode | '' |
className | string | Additional CSS classes for the trigger | undefined |