# 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: 

* default 
* disabled
* focused 
* hover 
* invalid

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

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

## Dropdowns

Dropdowns are styled [Select](https://docs.formsort.com/adding-questions-and-content/question-reference/select) questions. With the Select question highlighted, click on the **Style** tab and select **Picker style** -> **Dropdown**. 

<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&#x26;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)