> For the complete documentation index, see [llms.txt](https://docs.formsort.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.formsort.com/styling/customizing-appearance/dropdown-menu.md).

# Inputs and dropdowns

## Inputs

Input boxes are used in any question type that involves the responder typing in information. These can be edited on a per-UI state basis. The states available are:&#x20;

* default&#x20;
* disabled
* focused&#x20;
* hover&#x20;
* invalid

{% hint style="info" %}
In order to change the typography of the text input by the responder, you need to go to the [**typography**](/styling/customizing-appearance/typography.md) menu and change the settings in the **input** tab.&#x20;
{% endhint %}

Styling options for Input boxes can be found in **Theme** -> **Inputs**.

## Dropdowns

Dropdowns are styled [Select](/adding-questions-and-content/question-reference/select.md) questions. With the Select question highlighted, click on the **Style** tab and select **Picker style** -> **Dropdown**.&#x20;

<figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2F85ZjTqLfilG5i3EkHWtv%2Fimage.png?alt=media&amp;token=0e7c2a27-8a7e-4347-9543-08200f11df3f" alt=""><figcaption></figcaption></figure>

The dropdown input box inherits from the **Input** style by default, but can be overridden in the **Dropdowns** section of the style tab.

There are three key pieces to the dropdown: items, container, and input.&#x20;

* The **Input** tab is the first line users will see and click on to render the dropdown.&#x20;
* The **Items** tab controls what each of the options in the menu will look like.&#x20;
* The **Container** tab will let you customize the box that the items are enclosed in.

### Native vs. Default dropdown

Styling a list of choices as **Native Dropdown** rather than **Dropdown** can often be a more pleasant experience for responders on mobile because the **Native Dropdown** will inherit the UX of the operating system. The standard **Dropdown** will fix the choices to the top so that responders are not stuck scrolling within the scroll of the step.

You can see the difference between the two styles in this demo flow [here](https://formsortdemo.formsort.app/flow/dropdown-types/variant/main). Try opening it on mobile to see the different options!

![](https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FEQmLaWUyKq0vpqci67Yq%2Fimage.png?alt=media\&token=37b94fbf-d810-4f61-bd32-68e7846e8a46)![](https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FGkTGInrzpRAV8s6MB5vs%2Fimage.png?alt=media\&token=c683f560-09d3-4679-aeac-93b504c21196)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.formsort.com/styling/customizing-appearance/dropdown-menu.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
