# SelectList

A value display with a list of choices on a temporary menu surface when activated. A selectlist is also referred to as a dropdown by many people.

Inner element spacing is used for dynamic resizing along with a background surface.

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

* Parent: Form (Container)
* Child: [Field](https://able.bucca.com/core/overview/field), [Label](https://able.bucca.com/core/overview/label), [Menu](https://able.bucca.com/core/components/menu), [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 top (above the field), left, or not at all (none).

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FPxEUW9ZD5BoP9Xn7GI5j%2FLabel.png?alt=media&#x26;token=bab4706c-d557-41de-aad9-d765eb42c75f" alt=""><figcaption></figcaption></figure>

**Helper** - Does the component have helper text (On/Off). This is used to provide additional context for 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%2FuVdpcomZiwSvjNj0Z8a1%2FHelper.png?alt=media&#x26;token=37d20b14-99a3-4f21-b927-7aecdb457fbb" alt=""><figcaption></figcaption></figure>

**Choice Method** - There are a few options when working with the selectable choices of a SelectList.

<div><figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FQ8TPhM9R85Zb2peJxdbH%2FChoice%20-%20Drop.png?alt=media&#x26;token=9599f240-d0aa-47c4-b4cd-b1e9843e5e3b" alt=""><figcaption></figcaption></figure> <figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F0I0FIWNODgtVFzNKGcCy%2FChoice%20-%20Sheet.png?alt=media&#x26;token=74ace3f1-03d6-43a0-8ae1-8bfc4d06277d" alt=""><figcaption></figcaption></figure></div>

* **Standard Dropdown** - A temporary modal Menu element that is displayed over top (elevated above) the visible SelectList - Field. This works great for shorter lists of content options (<10).
* **Autosuggest Dropdown** - When the list of options within the SelectList is longer or infinite and the user already knows the answer, the SelectList - Field acts as a field to collect, autocomplete (the typed word) and filter the results in the Dropdown (displayed directly below the SelectList - Field) of the typed characters. This is similar to how the Google search box works. Another good example of this in use is in choosing a country.
* **Sheet: Listview** - For lists that are a bit longer and will need scrolling within the ListView to account for all options we can use a standard sheet (with its three heights) that appears from the bottom of the screen.
* **Screen: Listview** - For very large lists and those that might need a graphic, adaptIcon, and/or additional context with a description, we can navigate directly to (as opposed to the sheet first) a new screen where the full screen is displaying the list, where a choice would navigate the user back to the original screen where the SelectList was first presented and now shows the choosen option in the Field.

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