# 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](https://able.bucca.com/core/overview/label), [Avatar - Bar](https://able.bucca.com/core/overview/avatar/avatar-bar), [FC - Leading](https://able.bucca.com/core/components/form/fc-leading), [FC - Trailing](https://able.bucca.com/core/components/form/fc-trailing)

## Properties

### Label

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FXRjp94pekDI656fPT4F6%2FLabel.png?alt=media&#x26;token=11360e3b-a567-4b41-9649-d9abccd17f83" 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="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2Fy0nMeMQHKAvSsXHZjG0t%2FHelper.png?alt=media&#x26;token=156bb0c2-bca0-49cb-bf82-1a4be734a00f" alt=""><figcaption></figcaption></figure>

### Size

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FCNTIOXYfjrHuDJAwJsFs%2FSize.png?alt=media&#x26;token=7b31009f-a426-4dc9-9746-24a13a382160" 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.