Chat User Picker

A searchable, multi-select user list for starting conversations. Users tap to select or deselect. The component outputs the selected users as Magic Text that other components — like the Conversation Action Button — can read.

---

Before You Begin

• You need a Users collection (or equivalent) with at least a name and optional avatar URL.

• This component works best alongside the Conversation Action Button, which reads its Magic Text outputs to start or continue a conversation.

---

Getting Started

1

Add the component

Add the Chat User Picker to your "New Conversation" or "Select Recipients" screen.

2

Choose your users collection

In the Users section, choose your users collection. Filter out the logged-in user if you don't want them to appear in the list (e.g., filter where ID ≠ Logged In User > ID).

3

Map your user fields

Open User Fields and map your data:

• User ID → your user ID field

• Name → the user's display name

• Avatar URL → the user's profile photo URL (optional)

• Line 2 / Line 3 → any secondary info like email or username (optional)

4

Set the logged-in user ID

Set Logged In User ID to Logged In User > ID using Magic Text — the component includes this in its Selected User IDs output automatically for conversation deduplication.

---

Settings

Search Bar

• Placeholder — The text shown in the search field when empty. Defaults to "Search users…"

• Background Color, Text Color — Style the search bar to match your app.

• Show Search Icon — Toggle on to show a magnifying glass icon inside the search field.

• Border Radius — Corner roundness of the search field.

Toggle

Controls the appearance of the select/deselect indicator on each row.

• Shape — Circle, Square, or Rounded Square.

• Active Color — The fill color when a user is selected.

• Inactive Color — The color when a user is not selected.

• Checkmark Color — The checkmark icon color inside the active toggle.

• Show Selected Icon / Show Unselected Icon — Toggle on to show custom icons in each state. You can also pick which icon to use.

• Size — The diameter of the toggle (18–40, default: 26).

Styling

• List Background — The background color of the entire list area.

• Selected Row Background — A tint shown behind rows that are selected.

• Divider Color / Show Divider — Control row separators.

• Avatar Size — The diameter of the avatar image (32–80, default: 48).

• Row Height — The height of each row (50–120, default: 72).

• Users Per Page — How many users to load at once (10–50, default: 20). A "Load More" button appears when there are additional users.

Name Style / Line 2 Style / Line 3 Style

Fine-tune the font size and color for each line of text per row independently.

---

Magic Text Outputs

These values are available as Magic Text on the screen once users make selections. Wire them to other components or actions.

Output	Description
Selected User IDs	A sorted, comma-separated string of all selected user IDs plus the logged-in user's ID. Use this with the Conversation Action Button to find or create a conversation.
Selected Count	The total number of selected users (including the logged-in user). Wire this to the Conversation Action Button's Selected Count field.
User 2 ID	The ID of the first selected user (for 1-on-1 conversations).
User 2 Name	The name of the first selected user.
User 2 Image URL	The avatar URL of the first selected user.

---

Actions

Set these up in the User Fields section under each user row.

• When Selected — Fires every time a user is tapped to select them. Use this to add a relationship between the new conversation and this user.

• When Deselected — Fires every time a user is tapped to deselect them. Use this to remove a relationship if you're building relationships in real time.

---

Tips

• The Selected User IDs output always includes the logged-in user's ID in the sorted string — you don't need to add it manually. This ensures conversation deduplication works correctly with the Conversation Action Button.

• Filter your Users list to exclude the logged-in user before binding — most chat UIs don't show "yourself" in the recipient list.

• For large user lists, set Users Per Page to 20–30 and let the Load More button handle pagination.

• Use Selected Row Background to give a visual highlight to rows that are selected — it makes the multi-select state much clearer.

---

Need Help?

Visit forum.adalo.com to ask questions or share what you've built.