Advanced Select | UI Showcase

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.

Live preview

Default advanced select 1 selected

Component usage.wrn

<AdvancedSelect
  label="Default advanced select"
  name="advanced-select-1"
  value="design"
  values='[]'
  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
    }
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
/>

Selection

Grouped options

Live grouped options configuration with copyable component code.

Live preview

Grouped options 1 selected

Component usage.wrn

<AdvancedSelect
  label="Grouped options"
  name="advanced-select-2"
  value="design"
  values='[]'
  options='[]'
  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
        }
      ]
    }
  ]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/>

Selection

Fixed-position dropdown

Live fixed-position dropdown configuration with copyable component code.

Live preview

Fixed-position dropdown 1 selected

Component usage.wrn

<AdvancedSelect
  label="Fixed-position dropdown"
  name="advanced-select-3"
  value="design"
  values='[]'
  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
    }
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  fixed="true"
/>

Selection

Placeholder with icon

Live placeholder with icon configuration with copyable component code.

Live preview

Placeholder with icon 0 selected

Component usage.wrn

<AdvancedSelect
  label="Placeholder with icon"
  name="advanced-select-4"
  values='[]'
  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
    }
  ]'
  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.

Live preview

Allow empty selection 1 selected

Component usage.wrn

<AdvancedSelect
  label="Allow empty selection"
  name="advanced-select-5"
  value="design"
  values='[]'
  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
    }
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
/>

Selection

Multiple selection

Live multiple selection configuration with copyable component code.

Live preview

Multiple selection 2 selected

Component usage.wrn

<AdvancedSelect
  label="Multiple selection"
  name="advanced-select-6"
  values='[
    "design",
    "engineering"
  ]'
  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
    }
  ]'
  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.

Live preview

Multiple selection with optgroups 2 selected

Component usage.wrn

<AdvancedSelect
  label="Multiple selection with optgroups"
  name="advanced-select-7"
  values='[
    "design",
    "engineering"
  ]'
  options='[]'
  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
        }
      ]
    }
  ]'
  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.

Live preview

Multiple selection with option templates 2 selected

Component usage.wrn

<AdvancedSelect
  label="Multiple selection with option templates"
  name="advanced-select-8"
  values='[
    "design",
    "engineering"
  ]'
  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
    }
  ]'
  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.

Live preview

Multiple selection with counter 2 selected

Component usage.wrn

<AdvancedSelect
  label="Multiple selection with counter"
  name="advanced-select-9"
  values='[
    "design",
    "engineering"
  ]'
  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
    }
  ]'
  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

Multiple selection with conditional counter 2 / 3 selected

Component usage.wrn

<AdvancedSelect
  label="Multiple selection with conditional counter"
  name="advanced-select-10"
  values='[
    "design",
    "engineering"
  ]'
  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
    }
  ]'
  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

Counter with option templates 1 selected

Component usage.wrn

<AdvancedSelect
  label="Counter with option templates"
  name="advanced-select-11"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Searchable dropdown 1 selected

Component usage.wrn

<AdvancedSelect
  label="Searchable dropdown"
  name="advanced-select-12"
  value="design"
  values='[]'
  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
    }
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
/>

Search & templates

Minimum search length

Live minimum search length configuration with copyable component code.

013

Live preview

Minimum search length 1 selected

Component usage.wrn

<AdvancedSelect
  label="Minimum search length"
  name="advanced-select-13"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Search result limit 1 selected

Component usage.wrn

<AdvancedSelect
  label="Search result limit"
  name="advanced-select-14"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Scroll to selected option 1 selected

Component usage.wrn

<AdvancedSelect
  label="Scroll to selected option"
  name="advanced-select-15"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Search match mode 1 selected

Component usage.wrn

<AdvancedSelect
  label="Search match mode"
  name="advanced-select-16"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Search labels and descriptions 1 selected

Component usage.wrn

<AdvancedSelect
  label="Search labels and descriptions"
  name="advanced-select-17"
  value="design"
  values='[]'
  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
    }
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
/>

Search & templates

Tag-style selection

Live tag-style selection configuration with copyable component code.

018

Live preview

Tag-style selection 1 selected

Component usage.wrn

<AdvancedSelect
  label="Tag-style selection"
  name="advanced-select-18"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Disabled tag selection 1 selected

Component usage.wrn

<AdvancedSelect
  label="Disabled tag selection"
  name="advanced-select-19"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Option template with icons 1 selected

Component usage.wrn

<AdvancedSelect
  label="Option template with icons"
  name="advanced-select-20"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Option template with avatars 1 selected

Component usage.wrn

<AdvancedSelect
  label="Option template with avatars"
  name="advanced-select-21"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Option template with color indicators 1 selected

Component usage.wrn

<AdvancedSelect
  label="Option template with color indicators"
  name="advanced-select-22"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Advanced select sizes 1 selected

Component usage.wrn

<AdvancedSelect
  size="lg"
  label="Advanced select sizes"
  name="advanced-select-23"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Disabled advanced select 1 selected

Component usage.wrn

<AdvancedSelect
  label="Disabled advanced select"
  name="advanced-select-24"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Inside a modal 1 selected

Component usage.wrn

<AdvancedSelect
  label="Inside a modal"
  name="advanced-select-25"
  value="design"
  values='[]'
  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
    }
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/>

Advanced behavior

Validation states

Live validation states configuration with copyable component code.

026

Live preview

Validation states 1 selected

Component usage.wrn

<AdvancedSelect
  label="Validation states"
  name="advanced-select-26"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Dynamic validation styling 1 selected

Component usage.wrn

<AdvancedSelect
  label="Dynamic validation styling"
  name="advanced-select-27"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Add or remove options 1 selected

Component usage.wrn

<AdvancedSelect
  label="Add or remove options"
  name="advanced-select-28"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Add or remove options in multiple mode 2 selected

Component usage.wrn

<AdvancedSelect
  label="Add or remove options in multiple mode"
  name="advanced-select-29"
  values='[
    "design",
    "engineering"
  ]'
  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
    }
  ]'
  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

Set a single value programmatically 1 selected

Component usage.wrn

<AdvancedSelect
  label="Set a single value programmatically"
  name="advanced-select-30"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Set multiple values programmatically 2 selected

Component usage.wrn

<AdvancedSelect
  label="Set multiple values programmatically"
  name="advanced-select-31"
  values='[
    "design",
    "engineering"
  ]'
  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
    }
  ]'
  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

Remote data source 1 selected

Component usage.wrn

<AdvancedSelect
  label="Remote data source"
  name="advanced-select-32"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Remote data source (multiple) 2 selected

Component usage.wrn

<AdvancedSelect
  label="Remote data source (multiple)"
  name="advanced-select-33"
  values='[
    "design",
    "engineering"
  ]'
  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
    }
  ]'
  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

Remote data tags 2 selected

Component usage.wrn

<AdvancedSelect
  label="Remote data tags"
  name="advanced-select-34"
  values='[
    "design",
    "engineering"
  ]'
  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
    }
  ]'
  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

Option templates with remote data 1 selected

Component usage.wrn

<AdvancedSelect
  label="Option templates with remote data"
  name="advanced-select-35"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Conditional counter with remote data 1 / 3 selected

Component usage.wrn

<AdvancedSelect
  label="Conditional counter with remote data"
  name="advanced-select-36"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Avatar template with remote data 1 selected

Component usage.wrn

<AdvancedSelect
  label="Avatar template with remote data"
  name="advanced-select-37"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Preselected values 1 selected

Component usage.wrn

<AdvancedSelect
  label="Preselected values"
  name="advanced-select-38"
  value="engineering"
  values='[]'
  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
    }
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/>

Advanced behavior

Infinite scroll

Live infinite scroll configuration with copyable component code.

039

Live preview

Infinite scroll 1 selected

Component usage.wrn

<AdvancedSelect
  label="Infinite scroll"
  name="advanced-select-39"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Inside overflow-hidden containers 1 selected

Component usage.wrn

<AdvancedSelect
  label="Inside overflow-hidden containers"
  name="advanced-select-40"
  value="design"
  values='[]'
  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
    }
  ]'
  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

Destroy and reinitialize 1 selected

Component usage.wrn

<AdvancedSelect
  label="Destroy and reinitialize"
  name="advanced-select-41"
  value="design"
  values='[]'
  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
    }
  ]'
  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.

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`label`	string	`"Advanced Select"`	No
`name`	string	`""`	No
`value`	string	`""`	No
`values`	unknown[]	`[]`	No
`options`	unknown[]	`[]`	No
`groups`	unknown[]	`[]`	No
`placeholder`	string	`"Select an option"`	No
`placeholderIcon`	string	`""`	No
`searchPlaceholder`	string	`"Search options…"`	No
`multiple`	boolean	`false`	No
`searchable`	boolean	`true`	No
`defaultOpen`	boolean	`false`	No
`clearable`	boolean	`true`	No
`allowEmpty`	boolean	`true`	No
`tags`	boolean	`false`	No
`disabled`	boolean	`false`	No
`required`	boolean	`false`	No
`invalid`	boolean	`false`	No
`validationMessage`	string	`""`	No
`helpText`	string	`""`	No
`loading`	boolean	`false`	No
`loadingLabel`	string	`"Loading options…"`	No
`emptyLabel`	string	`"No options found"`	No
`selectedOptionsLabel`	string	`"Selected options"`	No
`clearLabel`	string	`"Clear selection"`	No
`createLabel`	string	`"Create"`	No
`loadMoreLabel`	string	`"Load more"`	No
`searchMode`	string	`"contains"`	No
`searchFields`	string	`"label,description"`	No
`minSearchLength`	number	`0`	No
`searchResultLimit`	number	`0`	No
`maxSelections`	number	`0`	No
`showCounter`	boolean	`false`	No
`counterTemplate`	string	`"{selected} selected"`	No
`optionTemplate`	string	`"default"`	No
`selectedTemplate`	string	`"default"`	No
`closeOnSelect`	boolean	`true`	No
`scrollToSelected`	boolean	`true`	No
`fixed`	boolean	`false`	No
`placement`	string	`"bottom"`	No
`remote`	boolean	`false`	No
`remoteUrl`	string	`""`	No
`remoteQueryParam`	string	`"q"`	No
`remoteDebounce`	number	`250`	No
`remoteAutoLoad`	boolean	`true`	No
`infinite`	boolean	`false`	No
`hasMore`	boolean	`false`	No
`page`	number	`1`	No
`class`	string	`""`	No

Configure Advanced Select

Designed for real product surfaces

Receive every typed component output

Props and configuration