# 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](/core/overview/field.md), [Label](/core/overview/label.md), [Menu](/core/components/menu.md), [FC - Leading](/core/components/form/fc-leading.md), [FC - Trailing](/core/components/form/fc-trailing.md)

## 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="/files/11Dwr0Crfl27yoEiGPqB" 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="/files/nKysi1qgQVuTNnbyUgj2" alt=""><figcaption></figcaption></figure>

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

<div><figure><img src="/files/ShbjZVO4H0FFTxcM1XCO" alt=""><figcaption></figcaption></figure> <figure><img src="/files/4RWDFmegZJGvRwC2mGPf" 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.


---

# 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/selectlist.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.