# 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**](/component-basics/marketplace-components/chat-suite/start-conversation/conversation-action-button.md), which reads its Magic Text outputs to start or continue a conversation. *** ## Getting Started {% stepper %} {% step %} ### Add the component Add the **Chat User Picker** to your "New Conversation" or "Select Recipients" screen. {% endstep %} {% step %} ### 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). {% endstep %} {% step %} ### 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) {% endstep %} {% step %} ### 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. {% endstep %} {% endstepper %} *** ## 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](https://forum.adalo.com/) to ask questions or share what you've built. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/chat-suite/start-conversation/chat-user-picker.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.