# UserList

Component: A form control for the collection of users (avatars), used when adding people in a form.

[Styleguide Link](https://zpl.io/29dz8PY)

* Parent: Form (Container)
* Child: [Label](/core/overview/label.md), [Avatar - Bar](/core/overview/avatar/avatar-bar.md), [FC - Leading](/core/components/form/fc-leading.md), [FC - Trailing](/core/components/form/fc-trailing.md)

## Properties

### Label

<figure><img src="/files/O3WsZYiqKL85NBzbHtAX" alt=""><figcaption></figcaption></figure>

* **Top** - The label for the form field is placed above the form control.
* **Left** - The label for the form field is placed to the left of the form control.
* **None** - No label is used with the form control.

### Helper

The additional helper text that can be presented below the form control.

<figure><img src="/files/bVu8aBHJHxOPKxIvGNQb" alt=""><figcaption></figcaption></figure>

### Size

<figure><img src="/files/Q6kItsh0UaB8XgqLcP0A" alt=""><figcaption></figcaption></figure>

* Small - The default size for the control
* Medium
* Large

## Functionality

This form control acts as a container for a collection of people. People are added to the container (horizontal scroll of avatars) by tapping the placeholder (first) avatar to begin the selection process. That process will normally happen in a sheet that appears. Once the selection process is complete the user would close that sheet and those avatars that were selected would appear in the controls horizontal scroll.

**Note:** The structure and spacing of this component is the same between Textfield, Textarea, Selectlist, Chiplist, Slider, Userlist, and Toggle Button.

**Note:** Each of the nested elements and primitives of this form component have properties that can be adjusted to customize the component.


---

# 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://able.bucca.com/core/components/form/userlist.md?ask=<question>
```

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.