Select

The Select component provides a dropdown interface for selecting one or multiple options from a predefined list. It supports search, validation, and multiple selection modes.

Overview

Select provides a complete dropdown solution with:

• Single and multiple selection
• Searchable options
• Clearable selection
• Custom option rendering
• Validation support
• Block layout option

Basic Usage

{
  uuid: "my-select",
  name: "country_select",
  component_type: "select",
  input: {
    placeholder: { type: "string", value: "Select a country" },
    label: { type: "string", value: "Country" }
  },
  inputHandlers: {
    options: `
      return [
        { label: 'United States', value: 'us' },
        { label: 'United Kingdom', value: 'uk' },
        { label: 'Canada', value: 'ca' },
        { label: 'Australia', value: 'au' }
      ];
    `
  },
  event: {
    onChange: `
      $selectedCountry = EventData.value;
    `
  }
}

Component Inputs

Property	Type	Default	Description
value	string | string[]	''	Selected value(s)
options	array	[]	Array of option objects
placeholder	string	'Select an option'	Placeholder text
searchPlaceholder	string	'Search options...'	Search input placeholder
label	string	''	Label text
helper	string	''	Helper text
selectionMode	string	'single'	Selection mode: 'single', 'multiple'
searchable	boolean	false	Enable search
clearable	boolean	false	Enable clear button
required	boolean	false	Mark as required
block	boolean	false	Full-width display
disabled	boolean	false	Disable select
state	string	'default'	State: 'default', 'disabled'
size	string	'medium'	Size: 'small', 'medium', 'large'

---

Events

onChange

Triggered: When selection changes

EventData:

{
  value: string | string[]  // Selected value(s)
}

onFocus / onBlur

Triggered: When select receives/loses focus

onDropdownOpen / onDropdownClose

Triggered: When dropdown opens/closes

onValidation

Triggered: When validation occurs

EventData:

{
  isValid: boolean
  message: string
}

---

Common Patterns

Dependent Selects

// Country select
{
  uuid: "country-select",
  component_type: "select",
  input: { label: { type: "string", value: "Country" } },
  inputHandlers: {
    options: `return [{ label: 'USA', value: 'us' }, { label: 'Canada', value: 'ca' }];`
  },
  event: {
    onChange: `
      $selectedCountry = EventData.value;
      $selectedCity = null;
      $cities = await LoadCities(EventData.value);
    `
  }
}

// City select (dependent)
{
  uuid: "city-select",
  component_type: "select",
  input: { label: { type: "string", value: "City" } },
  inputHandlers: {
    options: `return $cities || [];`,
    disabled: `return !$selectedCountry;`
  },
  event: {
    onChange: `$selectedCity = EventData.value;`
  }
}

Multi-Select Tags

{
  component_type: "select",
  input: {
    selectionMode: { type: "string", value: "multiple" },
    searchable: { type: "boolean", value: true },
    placeholder: { type: "string", value: "Select tags" }
  },
  inputHandlers: {
    options: `return $availableTags.map(tag => ({ label: tag.name, value: tag.id }));`,
    value: `return $selectedTags || [];`
  },
  event: {
    onChange: `$selectedTags = EventData.value;`
  }
}

---

See Also

• Dropdown Component - Action menu
• RadioButton Component - Radio selection
• Checkbox Component - Checkbox selection