Inputs and dropdowns
Last updated
Last updated
Input boxes are used in any question type that involves the responder typing in information.
Similar to other Assets, input boxes can be edited on a per-UI state basis. The states available are: default, disabled, focused, hover and invalid.
In order to change the typography of the text input by the responder, you need to go to the typography menu and change the settings in the input tab.
Styling options for Input boxes can be found in Theme -> Inputs.
Dropdowns are styled Select questions. With the Select question highlighted, click on the Style tab and select Picker style -> Dropdown.
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.
The Input tab is the first line users will see and click on to render the dropdown.
The Items tab controls what each of the options in the menu will look like.
The Container tab will let you customize the box that the items are enclosed in.
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. Try opening it on mobile to see the different options!
