A user input component that allows users to select a single or multiples value(s) from a searchable list of options.

​
Overview

The Select Input component provides a dropdown interface for selecting single or multiple values from a searchable list of options. It offers a clean, accessible way to present multiple choices while maintaining a compact interface. Select inputs are essential for forms and interfaces where users need to choose from predefined options. They provide better user experience than text inputs for categorical data and help ensure data consistency and validation.

​
Common use cases

  • Form selections: Choose options in registration and configuration forms
  • Category filtering: Filter content by categories or types with single or multiple selections
  • Configuration settings: Select preferences and settings from predefined options
  • Data entry: Choose from standardized options for consistent data entry

​
How it works

  1. Label: Provide a clear label for the select input field
  2. Options: Define available choices as key-value pairs in JSON format
  3. Dropdown: Display options in a searchable dropdown interface
  4. Selection: Allow users to select one or multiple options from the list
  5. Binding: Connect to a state variable to store the selected value
  6. Events: Trigger workflows when selections change
The component automatically updates the bound state variable when users make selections, and can trigger events for real-time processing or validation.

​
Configuration options

​
Basic settings

  • Label: Text label displayed preceding the select input field
  • Allow Multi-select: Toggle to enable selection of multiple options from the dropdown (default: off)
  • Options: Key-value object with available options (must be a JSON string or state reference to a dictionary)
  • Placeholder: Text to display when no options are selected
  • Maximum count: The maximum allowable number of selected options (set to zero for unlimited) - only available when multi-select is enabled

​
Binding settings

  • Link Variable: Connect the result of this component to a dynamic variable for use across the agent

​
Styling options

  • Accent color: Set the focus and highlight color for the select input
  • Primary text color: Set the main text color for options and labels
  • Container background color: Set the background color of the dropdown container
  • Separator color: Set the border and divider color
  • Custom CSS classes: Apply additional styling with custom CSS classes (separated by spaces)

​
Events

  • wf-option-change: Triggered when a single option changes (only available when multi-select is off) - payload contains the selected option
  • wf-options-change: Triggered when multiple options change (only available when multi-select is enabled) - payload contains array of selected options

​
Example

​
User registration form

This example shows how to create a registration form with select inputs. Interface:
  • Text Input components for personal information
  • Select Input components for preferences
  • Button component for submission
Select Input configuration:
  • Label: “Country,” “Account Type,” “Time Zone”
  • Options: Various country, account type, and timezone options
  • Link Variable: “country,” “account,” “timezone”

​
Multi-select tag management

Create a tag management interface for content categorization. Interface:
  • Select Input component with multi-select enabled
  • Button component for saving
Select Input configuration:
  • Label: “Content Tags”
  • Allow Multi-select: Enabled
  • Options: JSON object with tag categories
  • Placeholder: “Select tags for your content”
  • Link Variable: “tags”

​
Best practices

  1. Clear labeling: Use descriptive labels that explain the selection purpose and context
  2. Logical ordering: Arrange options in logical order (alphabetical, numerical, or by frequency of use)
  3. Option clarity: Use clear, concise option text that users understand without ambiguity
  4. Accessibility: Ensure select inputs are keyboard navigable and screen reader friendly

​
Fields

NameTypeDescriptionOptions
LabelText--
Allow Multi-selectBooleanSelect more than one option from the dropdown.-
OptionsKey-ValueKey-value object with options. Must be a JSON string or a state reference to a dictionary.-
PlaceholderTextText to show when no options are selected.-
Maximum countNumberThe maximum allowable number of selected options. Set to zero for unlimited.-
AccentColor--
Primary textColor--
Chip textColorThe colour of the text in the chips.-
Container backgroundColor--
SeparatorColor--
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.-

​
Events