Skip to main content

Getting started with select inputs

Learn how to provide a list of options from which users can select in Retool web apps.

You can use the following components to present a set of options from which users can select:

Demo

Specify content options​

The Content section of the Inspector contains settings that control the content of an input field, such as:

  • Default value
  • Placeholder
  • Label and caption

Most select input components include an Add ons section, which enables you to add items such as a label or tooltip to the component.

Define options​

You define the options for most select input components manually or dynamically by mapping to an array of data. Refer to the Define option lists guide for more information.

Configure user interaction​

The Interaction section of the Inspector contains settings that control user interaction and validation, such as:

  • Event handlers, which listen for and handle interactions with your components.
  • Validation rules, which define the types of user inputs that your components accept.

You can set the value of a selection component programmatically using the .setValue() method.

Select all options​

Multiselect and Multiselect Listbox both enable a user to select all options in the list using the UI, or programmatically with the .values property or .setValues() method.

For example, you could add a Checkbox component that, when checked, selects all values for the Multiselect component. To accomplish this, add a Multiselect component and a Checkbox component to the canvas.

In the Checkbox inspector, add an event handler with the following settings:

  • Event: True
  • Action: Control component
  • Component: multiselect1
  • Method: Set value
  • Value: {{ multiselect1.values }}
Currency input

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.

All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.

You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.

Use the Show clear button setting to show an icon that lets the user clear the input field and return it to the Placeholder text. Multiselect Listbox includes Show footer setting instead, which displays Select all and Clear options in the footer.