Select Input - Writer AI Studio

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

Label: Provide a clear label for the select input field
Options: Define available choices as key-value pairs in JSON format
Dropdown: Display options in a searchable dropdown interface
Selection: Allow users to select one or multiple options from the list
Binding: Connect to a state variable to store the selected value
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

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

Fields

Name	Type	Description	Options
Label	Text	-	-
Allow Multi-select	Boolean	Select more than one option from the dropdown.	-
Options	Key-Value	Key-value object with options. Must be a JSON string or a state reference to a dictionary.	-
Placeholder	Text	Text to show when no options are selected.	-
Maximum count	Number	The maximum allowable number of selected options. Set to zero for unlimited.	-
Accent	Color	-	-
Primary text	Color	-	-
Chip text	Color	The colour of the text in the chips.	-
Container background	Color	-	-
Separator	Color	-	-
Custom CSS classes	Text	CSS classes, separated by spaces. You can define classes in custom stylesheets.	-

Events

wf-option-change
Sent when the selected option changes.


def onchange_handler(state, payload):
    # Set the state variable "selected" to the selected option
    state["selected"] = payload

wf-options-change
Sent when the selected options change.


def onchange_handler(state, payload):
    # Set the state variable "selected" to the selected option
    state["selected"] = payload

This component provides a searchable dropdown for selecting one or multiple values. Usage: supply the Options field with a key-value object; open the dropdown and use the search box at the top to filter options by label (and detail, when provided). Configuration: Enable multi-selection via the ‘Allow Multi-select’ field; set a placeholder and limit selections with ‘Maximum count’ (applies only to multi-select). Limitations: search is client-side, case-insensitive, and matches label/detail text only (not the option key); no remote/async search; very large option lists are filtered in-memory.