# 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="/files/dqMyOghvbj5QsghRnhHw" 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!

![](/files/X0rbWbJqV1QxgBtn4xTO)![](/files/THGXKmUXaGJg0EEytuMF)


---

# 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://docs.formsort.com/styling/customizing-appearance/dropdown-menu.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.
