Page layout — Combo box

Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area

Let’s take a look at the combo box component.

Combo box

We can use a combo box to show users a picklist of items (Size, zip codes, salutation, etc.) and save the selection to a value.

Here is a combo box that shows the user three dress sizes:

Combo boxes can be single select – the user can select one option, or multi-select, where the user can select more than one option.

The combo box is based on React Selectize, a stateless select component for React.

If the combo box items are fetched from a service, a refresh button is appended to the right of the combobox, that will fire the data request again when clicked.

When the user scrolls to the bottom of the current set of items in the dropdown, the next page of items (if available) are fetched and appended to the list.

By default pagination is disabled for comboboxes populated by a list. We can enable it by setting the pagination attribute to true.

By default, 250 items are displayed on a page. We can change this number by changing the settings.

We can adjust the page size for a specific table by adding the paginationSize attribute.


Goody bag
  1. Sample flow –
  2. Sample package –
  3. Tutorial: Using a combo box