// Generated by scripts/generate-showcase.mjs. Do not edit directly. page AdvancedSelectDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default advanced select" state playground_name = ctx.url.searchParams.get("pg_name") ?? "advanced-select-1" state playground_value = ctx.url.searchParams.get("pg_value") ?? "design" state playground_values = JSON.parse(ctx.url.searchParams.get("pg_values") ?? "[]") state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"value\":\"design\",\"label\":\"Design\",\"description\":\"Product and visual design\",\"icon\":\"icon-[lucide--palette]\",\"color\":\"#8b5cf6\",\"avatar\":\"/showcase-images/avatar-design.svg\"},{\"value\":\"engineering\",\"label\":\"Engineering\",\"description\":\"Platform and application engineering\",\"icon\":\"icon-[lucide--code-2]\",\"color\":\"#0ea5e9\",\"avatar\":\"/showcase-images/avatar-engineering.svg\"},{\"value\":\"growth\",\"label\":\"Growth\",\"description\":\"Marketing and customer growth\",\"icon\":\"icon-[lucide--trending-up]\",\"color\":\"#10b981\",\"avatar\":\"/showcase-images/avatar-growth.svg\"},{\"value\":\"support\",\"label\":\"Support\",\"description\":\"Customer operations\",\"disabled\":false}]") state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]") state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Choose a team" state playground_placeholderIcon = ctx.url.searchParams.get("pg_placeholderIcon") ?? "" state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Search options…" state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true" state playground_searchable = (ctx.url.searchParams.get("pg_searchable") ?? "true") === "true" state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true" state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true" state playground_allowEmpty = (ctx.url.searchParams.get("pg_allowEmpty") ?? "false") === "true" state playground_tags = (ctx.url.searchParams.get("pg_tags") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true" state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true" state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" state playground_loading = (ctx.url.searchParams.get("pg_loading") ?? "false") === "true" state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading options…" state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No options found" state playground_selectedOptionsLabel = ctx.url.searchParams.get("pg_selectedOptionsLabel") ?? "Selected options" state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear selection" state playground_createLabel = ctx.url.searchParams.get("pg_createLabel") ?? "Create" state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more" state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains" state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description" state playground_minSearchLength = Number(ctx.url.searchParams.get("pg_minSearchLength") ?? "0") state playground_searchResultLimit = Number(ctx.url.searchParams.get("pg_searchResultLimit") ?? "0") state playground_maxSelections = Number(ctx.url.searchParams.get("pg_maxSelections") ?? "0") state playground_showCounter = (ctx.url.searchParams.get("pg_showCounter") ?? "false") === "true" state playground_counterTemplate = ctx.url.searchParams.get("pg_counterTemplate") ?? "{selected} selected" state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default" state playground_selectedTemplate = ctx.url.searchParams.get("pg_selectedTemplate") ?? "default" state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true" state playground_scrollToSelected = (ctx.url.searchParams.get("pg_scrollToSelected") ?? "true") === "true" state playground_fixed = (ctx.url.searchParams.get("pg_fixed") ?? "false") === "true" state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" state playground_remote = (ctx.url.searchParams.get("pg_remote") ?? "false") === "true" state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? "" state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q" state playground_remoteDebounce = Number(ctx.url.searchParams.get("pg_remoteDebounce") ?? "250") state playground_remoteAutoLoad = (ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true") === "true" state playground_infinite = (ctx.url.searchParams.get("pg_infinite") ?? "false") === "true" state playground_hasMore = (ctx.url.searchParams.get("pg_hasMore") ?? "false") === "true" state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1") state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Advanced Select" description = "Theme-aware, responsive advanced select component." } view {
Advanced Forms component

Advanced Select

Theme-aware, responsive advanced select component.

51 props0 slots8 outputsTheme readyResponsive
Interactive playground

Configure Advanced Select

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Default advanced select"
      name="advanced-select-1"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
    />
  }
}
Event outputInteract with the preview to inspect the typed payload.
Component props51 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Selection

Default advanced select

Live default advanced select configuration with copyable component code.

01
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Default advanced select"
      name="advanced-select-1"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
    />
  }
}
Selection

Grouped options

Live grouped options configuration with copyable component code.

02
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = []
  state groups = [
  {
    "label": "Product",
    "options": [
      {
        "value": "design",
        "label": "Design",
        "description": "Product and visual design",
        "icon": "icon-[lucide--palette]",
        "color": "#8b5cf6",
        "avatar": "/showcase-images/avatar-design.svg"
      },
      {
        "value": "engineering",
        "label": "Engineering",
        "description": "Platform and application engineering",
        "icon": "icon-[lucide--code-2]",
        "color": "#0ea5e9",
        "avatar": "/showcase-images/avatar-engineering.svg"
      }
    ]
  },
  {
    "label": "Business",
    "options": [
      {
        "value": "growth",
        "label": "Growth",
        "description": "Marketing and customer growth",
        "icon": "icon-[lucide--trending-up]",
        "color": "#10b981",
        "avatar": "/showcase-images/avatar-growth.svg"
      },
      {
        "value": "support",
        "label": "Support",
        "description": "Customer operations",
        "disabled": false
      }
    ]
  }
]
  view {
    <AdvancedSelect
      label="Grouped options"
      name="advanced-select-2"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Selection

Fixed-position dropdown

Live fixed-position dropdown configuration with copyable component code.

03
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Fixed-position dropdown"
      name="advanced-select-3"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      fixed="true"
    />
  }
}
Selection

Placeholder with icon

Live placeholder with icon configuration with copyable component code.

04
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Placeholder with icon"
      name="advanced-select-4"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a workspace"
      placeholderIcon="icon-[lucide--building-2]"
      searchable="false"
      allowEmpty="false"
      optionTemplate="icon"
    />
  }
}
Selection

Allow empty selection

Live allow empty selection configuration with copyable component code.

05
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Allow empty selection"
      name="advanced-select-5"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
    />
  }
}
Selection

Multiple selection

Live multiple selection configuration with copyable component code.

06
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Multiple selection"
      name="advanced-select-6"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Selection

Multiple selection with optgroups

Live multiple selection with optgroups configuration with copyable component code.

07
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = []
  state groups = [
  {
    "label": "Product",
    "options": [
      {
        "value": "design",
        "label": "Design",
        "description": "Product and visual design",
        "icon": "icon-[lucide--palette]",
        "color": "#8b5cf6",
        "avatar": "/showcase-images/avatar-design.svg"
      },
      {
        "value": "engineering",
        "label": "Engineering",
        "description": "Platform and application engineering",
        "icon": "icon-[lucide--code-2]",
        "color": "#0ea5e9",
        "avatar": "/showcase-images/avatar-engineering.svg"
      }
    ]
  },
  {
    "label": "Business",
    "options": [
      {
        "value": "growth",
        "label": "Growth",
        "description": "Marketing and customer growth",
        "icon": "icon-[lucide--trending-up]",
        "color": "#10b981",
        "avatar": "/showcase-images/avatar-growth.svg"
      },
      {
        "value": "support",
        "label": "Support",
        "description": "Customer operations",
        "disabled": false
      }
    ]
  }
]
  view {
    <AdvancedSelect
      label="Multiple selection with optgroups"
      name="advanced-select-7"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Selection

Multiple selection with option templates

Live multiple selection with option templates configuration with copyable component code.

08
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Multiple selection with option templates"
      name="advanced-select-8"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      searchable="false"
      allowEmpty="false"
      optionTemplate="icon"
    />
  }
}
Selection

Multiple selection with counter

Live multiple selection with counter configuration with copyable component code.

09
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Multiple selection with counter"
      name="advanced-select-9"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      searchable="false"
      allowEmpty="false"
      showCounter="true"
    />
  }
}
Selection

Multiple selection with conditional counter

Live multiple selection with conditional counter configuration with copyable component code.

010
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Multiple selection with conditional counter"
      name="advanced-select-10"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      searchable="false"
      allowEmpty="false"
      maxSelections="3"
      showCounter="true"
    />
  }
}
Selection

Counter with option templates

Live counter with option templates configuration with copyable component code.

011
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Counter with option templates"
      name="advanced-select-11"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      showCounter="true"
      optionTemplate="icon"
    />
  }
}
Search & templates

Searchable dropdown

Live searchable dropdown configuration with copyable component code.

012
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Searchable dropdown"
      name="advanced-select-12"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
    />
  }
}
Search & templates

Minimum search length

Live minimum search length configuration with copyable component code.

013
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Minimum search length"
      name="advanced-select-13"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
      minSearchLength="3"
    />
  }
}
Search & templates

Search result limit

Live search result limit configuration with copyable component code.

014
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Search result limit"
      name="advanced-select-14"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
      searchResultLimit="3"
    />
  }
}
Search & templates

Scroll to selected option

Live scroll to selected option configuration with copyable component code.

015
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Scroll to selected option"
      name="advanced-select-15"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Search & templates

Search match mode

Live search match mode configuration with copyable component code.

016
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Search match mode"
      name="advanced-select-16"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
      searchMode="startsWith"
    />
  }
}
Search & templates

Search labels and descriptions

Live search labels and descriptions configuration with copyable component code.

017
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Search labels and descriptions"
      name="advanced-select-17"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
    />
  }
}
Search & templates

Tag-style selection

Live tag-style selection configuration with copyable component code.

018
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Tag-style selection"
      name="advanced-select-18"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      tags="true"
    />
  }
}
Search & templates

Disabled tag selection

Live disabled tag selection configuration with copyable component code.

019
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Disabled tag selection"
      name="advanced-select-19"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      tags="true"
      disabled="true"
    />
  }
}
Search & templates

Option template with icons

Live option template with icons configuration with copyable component code.

020
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Option template with icons"
      name="advanced-select-20"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      optionTemplate="icon"
    />
  }
}
Search & templates

Option template with avatars

Live option template with avatars configuration with copyable component code.

021
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Option template with avatars"
      name="advanced-select-21"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      optionTemplate="avatar"
    />
  }
}
Search & templates

Option template with color indicators

Live option template with color indicators configuration with copyable component code.

022
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Option template with color indicators"
      name="advanced-select-22"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      optionTemplate="color"
    />
  }
}
Search & templates

Advanced select sizes

Live advanced select sizes configuration with copyable component code.

023
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      size="lg"
      label="Advanced select sizes"
      name="advanced-select-23"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Advanced behavior

Disabled advanced select

Live disabled advanced select configuration with copyable component code.

024
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Disabled advanced select"
      name="advanced-select-24"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      disabled="true"
    />
  }
}
Advanced behavior

Inside a modal

Live inside a modal configuration with copyable component code.

025
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Inside a modal"
      name="advanced-select-25"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Advanced behavior

Validation states

Live validation states configuration with copyable component code.

026
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Validation states"
      name="advanced-select-26"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      required="true"
    />
  }
}
Advanced behavior

Dynamic validation styling

Live dynamic validation styling configuration with copyable component code.

027
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Dynamic validation styling"
      name="advanced-select-27"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      required="true"
    />
  }
}
Advanced behavior

Add or remove options

Live add or remove options configuration with copyable component code.

028
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Add or remove options"
      name="advanced-select-28"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Advanced behavior

Add or remove options in multiple mode

Live add or remove options in multiple mode configuration with copyable component code.

029
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Add or remove options in multiple mode"
      name="advanced-select-29"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Advanced behavior

Set a single value programmatically

Live set a single value programmatically configuration with copyable component code.

030
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Set a single value programmatically"
      name="advanced-select-30"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Advanced behavior

Set multiple values programmatically

Live set multiple values programmatically configuration with copyable component code.

031
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Set multiple values programmatically"
      name="advanced-select-31"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Advanced behavior

Remote data source

Live remote data source configuration with copyable component code.

032
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Remote data source"
      name="advanced-select-32"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
      minSearchLength="2"
      remote="true"
      remoteUrl="/api/teams"
    />
  }
}
Advanced behavior

Remote data source (multiple)

Live remote data source (multiple) configuration with copyable component code.

033
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Remote data source (multiple)"
      name="advanced-select-33"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      allowEmpty="false"
      minSearchLength="2"
      remote="true"
      remoteUrl="/api/teams"
    />
  }
}
Advanced behavior

Remote data tags

Live remote data tags configuration with copyable component code.

034
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = [
  "design",
  "engineering"
]
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Remote data tags"
      name="advanced-select-34"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      multiple="true"
      allowEmpty="false"
      tags="true"
      minSearchLength="2"
      remote="true"
      remoteUrl="/api/teams"
    />
  }
}
Advanced behavior

Option templates with remote data

Live option templates with remote data configuration with copyable component code.

035
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Option templates with remote data"
      name="advanced-select-35"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
      minSearchLength="2"
      optionTemplate="icon"
      remote="true"
      remoteUrl="/api/teams"
    />
  }
}
Advanced behavior

Conditional counter with remote data

Live conditional counter with remote data configuration with copyable component code.

036
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Conditional counter with remote data"
      name="advanced-select-36"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
      minSearchLength="2"
      maxSelections="3"
      showCounter="true"
      remote="true"
      remoteUrl="/api/teams"
    />
  }
}
Advanced behavior

Avatar template with remote data

Live avatar template with remote data configuration with copyable component code.

037
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Avatar template with remote data"
      name="advanced-select-37"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
      minSearchLength="2"
      optionTemplate="avatar"
      remote="true"
      remoteUrl="/api/teams"
    />
  }
}
Advanced behavior

Preselected values

Live preselected values configuration with copyable component code.

038
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Preselected values"
      name="advanced-select-38"
      value="engineering"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Advanced behavior

Infinite scroll

Live infinite scroll configuration with copyable component code.

039
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Infinite scroll"
      name="advanced-select-39"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      allowEmpty="false"
      remote="true"
      remoteUrl="/api/teams"
      infinite="true"
      hasMore="true"
    />
  }
}
Advanced behavior

Inside overflow-hidden containers

Live inside overflow-hidden containers configuration with copyable component code.

040
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Inside overflow-hidden containers"
      name="advanced-select-40"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
      fixed="true"
    />
  }
}
Advanced behavior

Destroy and reinitialize

Live destroy and reinitialize configuration with copyable component code.

041
Live preview
Component usage.wrn
page AdvancedSelectExample {
  state values = []
  state options = [
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]
  state groups = []
  view {
    <AdvancedSelect
      label="Destroy and reinitialize"
      name="advanced-select-41"
      value="design"
      values="{values}"
      options="{options}"
      groups="{groups}"
      placeholder="Choose a team"
      searchable="false"
      allowEmpty="false"
    />
  }
}
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@searchFires when the current search query changes.
@selectFires when an item, option, card, or result is selected.
@changeFires when the component's committed value or selection changes.
@clearFires after the current value or selection is cleared.
@openFires after the component opens.
@closeFires after the component closes.
@loadFires after remote or deferred content loads successfully.
@errorFires when the component cannot complete an operation.
Declarative handlers.wrn
<AdvancedSelect
  @search='console.log(payload)'
  @select='console.log(payload)'
  @change='console.log(payload)'
  @clear='console.log(payload)'
  @open='console.log(payload)'
  @close='console.log(payload)'
  @load='console.log(payload)'
  @error='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"AdvancedSelect\"], [data-component=\"AdvancedSelect\"]")

if (component) registerOutputHandler(component, "search", (payload) => {
  console.log("search", payload)
})

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})

if (component) registerOutputHandler(component, "change", (payload) => {
  console.log("change", payload)
})

if (component) registerOutputHandler(component, "clear", (payload) => {
  console.log("clear", payload)
})

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})

if (component) registerOutputHandler(component, "load", (payload) => {
  console.log("load", payload)
})

if (component) registerOutputHandler(component, "error", (payload) => {
  console.log("error", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Advanced Select"No
namestring""No
valuestring""No
valuesunknown[][]No
optionsunknown[][]No
groupsunknown[][]No
placeholderstring"Select an option"No
placeholderIconstring""No
searchPlaceholderstring"Search options…"No
multiplebooleanfalseNo
searchablebooleantrueNo
defaultOpenbooleanfalseNo
clearablebooleantrueNo
allowEmptybooleantrueNo
tagsbooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
validationMessagestring""No
helpTextstring""No
loadingbooleanfalseNo
loadingLabelstring"Loading options…"No
emptyLabelstring"No options found"No
selectedOptionsLabelstring"Selected options"No
clearLabelstring"Clear selection"No
createLabelstring"Create"No
loadMoreLabelstring"Load more"No
searchModestring"contains"No
searchFieldsstring"label,description"No
minSearchLengthnumber0No
searchResultLimitnumber0No
maxSelectionsnumber0No
showCounterbooleanfalseNo
counterTemplatestring"{selected} selected"No
optionTemplatestring"default"No
selectedTemplatestring"default"No
closeOnSelectbooleantrueNo
scrollToSelectedbooleantrueNo
fixedbooleanfalseNo
placementstring"bottom"No
remotebooleanfalseNo
remoteUrlstring""No
remoteQueryParamstring"q"No
remoteDebouncenumber250No
remoteAutoLoadbooleantrueNo
infinitebooleanfalseNo
hasMorebooleanfalseNo
pagenumber1No
classstring""No
} }