Selects
Adding and styling selects.
Last updated
Was this helpful?
Adding and styling selects.
Last updated
Was this helpful?
A Select is used to pick a value from a list of options.
They are useful for providing users with a predefined set of options to choose from. Users can quickly scan the list and choose the option that best fits their needs without the need to type out a response. They are also great for consistency, removing the need to analyze free-form responses.
Location in the Parts Library: Base Parts > Data Input > Select
The Select part consists of placeholder text (which might give an instruction such as 'select an option', or 'choose from the list'), and two or more Select items that drop down when the Select is expanded. There may also be a label above or below the Select part.
To edit the placeholder text within the Select box, select the text, then go to 'Text' in the property panel on the right and key in your new value. Placeholder text is usually an instruction for what is needed in the Select.
Your Select will need to be given an ID, which is an identifier for your select group. For example, if your Select is about choosing your favorite type of pet, then you might give it an identifier such as FavoritePet, or something that indicates to you what the Select is about. When you give your Select an ID, that ID automatically gives the select a State. You can see this when you click on the State Model property in the right property panel.
To edit the dropdown options, go to the Select Item.
First, we want to change the text within the Select item. In the property editor on the right, go to Title > Value Set, and enter the text for your dropdown item. That is the text that will appear in the dropdown list.
Now the value needs to be set for the Select.
In the property editor on the right, go to Value > Value Set, and enter the value for the item. This is the value that will appear in your database regarding the option that was chosen. The value could be the same as the title, or similar.
In the example below, you'll see the placeholder text of the select being updated; and the titles and values of the Select items.
You'll also see a Select item being changed, with a new icon being added; and a Select item being duplicated and edited to add another option to the list.
Press play to watch the short video:
You can also change the colors of Selects in an active state, when focused, and on hover. These are done the same way for foreground and background color.
To change the color when the Select is being hovered, select the Select part and open the 'Colors on Hover' editor on the right. Now you can set your preferred background and foreground color combination to signify that the Select is being hovered.
The 'Color on Focus' editor on the right refers to the color of the Select after it has been clicked, or if the user tabs to the Select.
The 'Color on Active' editor on the right refers to the color of the Select when it is active (the moment it is clicked).
The Select can be sized using the preset size, or by specifying the width and the height. In addition, you can set the width and the height of the menu dropdown in the sizing editor. In each case, sizes can be set based on device size.
Here is an example of setting the menu height for an extra small screen, and a medium screen. The XS screen has been set to a menu height of 150, which results in the menu scrolling to accommodate the menu:
Suppose there is a label above the Select. In that case, it's easily editable by selecting the text within the label, and editing as you would normally edit - by going to 'Text' in the property panel on the right and keying in your new value.
, , , and , can be amended using the property editor on the right, once the Select part has been selected.
Selects have more properties than most other parts. The background and foreground colors can be set.
The background colors of Input/Text Input Areas can be a .
Icons
Avatars
Text
Customizing and formatting
