# ChipList

Component: For use in forms this is a list of options in chip format with different input methods based on the type of chip selected. Inner element spacing is used for dynamic resizing along with a background surface.

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

* Parent: Form (Container)
* Child: [Chip - Bar](https://able.bucca.com/core/overview/chip/chip-bar), [Label](https://able.bucca.com/core/overview/label), [FC - Leading](https://able.bucca.com/core/components/form/fc-leading), [FC - Trailing](https://able.bucca.com/core/components/form/fc-trailing)

## Properties

### Label

The component can be presented with a label to give context to the form control. This label can be positioned above (top), left, or not at all (none). NOTE: Label left for a chiplist is represented as an icon which has a fixed width, we do not use text content that would have variable lengths, as that would alter the chiplists length randomly.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FaoQ5nm1ZNvJDQ6DY1dN0%2FLabel.png?alt=media&#x26;token=04f640e1-e206-4e8e-abe7-174fdea19712" alt=""><figcaption></figcaption></figure>

### Helper Text

To provide additional context for the component a sentence can be added to the component for examples, how the input will be used, or as further clarification to the label.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FqeYhaZHj4fnC0dsFAz2Z%2FHelper.png?alt=media&#x26;token=608c15d4-4192-4a75-8b53-d322ed9dcd88" alt=""><figcaption></figcaption></figure>

**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.