Combo Box | UI Showcase
WRNexus UI
Advanced Forms component

Combo Box

Editable autocomplete combobox with local and remote suggestions.

41 props0 slots8 outputsTheme readyResponsive
Interactive playground

Configure Combo Box

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

Live preview
Component code
<ComboBox
  label="Default autocomplete"
  name="combobox-1"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
/>
Event outputInteract with the preview to inspect the typed payload.
Component props41 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Autocomplete

Default autocomplete

Live default autocomplete combobox with editable autocomplete and copyable component code.

01
Live preview
Component usage.wrn
<ComboBox
  label="Default autocomplete"
  name="combobox-1"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
/>
Autocomplete

Local HTML options

Live local html options combobox with editable autocomplete and copyable component code.

02
Live preview
Component usage.wrn
<ComboBox
  label="Local HTML options"
  name="combobox-2"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
/>
Autocomplete

Grouped suggestions

Live grouped suggestions combobox with editable autocomplete and copyable component code.

03
Live preview
Component usage.wrn
<ComboBox
  label="Grouped suggestions"
  name="combobox-3"
  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",
          "icon": "icon-[lucide--life-buoy]",
          "color": "#f59e0b"
        }
      ]
    }
  ]'
  placeholder="Search teams"
/>
Autocomplete

Minimum search length

Live minimum search length combobox with editable autocomplete and copyable component code.

04
Live preview
Component usage.wrn
<ComboBox
  label="Minimum search length"
  name="combobox-4"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  minSearchLength="3"
/>
Autocomplete

Search result limit

Live search result limit combobox with editable autocomplete and copyable component code.

05
Live preview
Component usage.wrn
<ComboBox
  label="Search result limit"
  name="combobox-5"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  searchResultLimit="2"
/>
Autocomplete

Starts-with matching

Live starts-with matching combobox with editable autocomplete and copyable component code.

06
Live preview
Component usage.wrn
<ComboBox
  label="Starts-with matching"
  name="combobox-6"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  searchMode="startsWith"
/>
Autocomplete

Search labels and descriptions

Live search labels and descriptions combobox with editable autocomplete and copyable component code.

07
Live preview
Component usage.wrn
<ComboBox
  label="Search labels and descriptions"
  name="combobox-7"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
/>
Templates & states

Suggestions with icons

Live suggestions with icons combobox with editable autocomplete and copyable component code.

08
Live preview
Component usage.wrn
<ComboBox
  label="Suggestions with icons"
  name="combobox-8"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  optionTemplate="icon"
/>
Templates & states

Suggestions with avatars

Live suggestions with avatars combobox with editable autocomplete and copyable component code.

09
Live preview
Component usage.wrn
<ComboBox
  label="Suggestions with avatars"
  name="combobox-9"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  optionTemplate="avatar"
/>
Templates & states

Suggestions with color indicators

Live suggestions with color indicators combobox with editable autocomplete and copyable component code.

010
Live preview
Component usage.wrn
<ComboBox
  label="Suggestions with color indicators"
  name="combobox-10"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  optionTemplate="color"
/>
Templates & states

Clearable value

Live clearable value combobox with editable autocomplete and copyable component code.

011
Live preview
Component usage.wrn
<ComboBox
  label="Clearable value"
  name="combobox-11"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
/>
Templates & states

Custom text values

Live custom text values combobox with editable autocomplete and copyable component code.

012
Live preview
Component usage.wrn
<ComboBox
  label="Custom text values"
  name="combobox-12"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  allowCustomValue="true"
/>
Templates & states

Preselected value

Live preselected value combobox with editable autocomplete and copyable component code.

013
Live preview
Component usage.wrn
<ComboBox
  label="Preselected value"
  name="combobox-13"
  value="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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
/>
Templates & states

Disabled combobox

Live disabled combobox combobox with editable autocomplete and copyable component code.

014
Live preview
Component usage.wrn
<ComboBox
  label="Disabled combobox"
  name="combobox-14"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  disabled="true"
/>
Templates & states

Validation state

Live validation state combobox with editable autocomplete and copyable component code.

015
Live preview
Component usage.wrn
<ComboBox
  label="Validation state"
  name="combobox-15"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  required="true"
/>
Remote & API

Remote data with automatic preload

Live remote data with automatic preload combobox with editable autocomplete and copyable component code.

016
Live preview
Component usage.wrn
<ComboBox
  label="Remote data with automatic preload"
  name="combobox-16"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search remote teams"
  minSearchLength="2"
  remote="true"
  remoteUrl="/api/teams"
/>
Remote & API

Remote search API

Live remote search api combobox with editable autocomplete and copyable component code.

017
Live preview
Component usage.wrn
<ComboBox
  label="Remote search API"
  name="combobox-17"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search remote teams"
  minSearchLength="2"
  remote="true"
  remoteUrl="/api/teams"
/>
Remote & API

Remote query parameters

Live remote query parameters combobox with editable autocomplete and copyable component code.

018
Live preview
Component usage.wrn
<ComboBox
  label="Remote query parameters"
  name="combobox-18"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search remote teams"
  minSearchLength="2"
  remote="true"
  remoteUrl="/api/teams"
/>
Remote & API

Infinite remote suggestions

Live infinite remote suggestions combobox with editable autocomplete and copyable component code.

019
Live preview
Component usage.wrn
<ComboBox
  label="Infinite remote suggestions"
  name="combobox-19"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search remote teams"
  minSearchLength="2"
  remote="true"
  remoteUrl="/api/teams"
  infinite="true"
  hasMore="true"
/>
Remote & API

Fixed-position suggestions

Live fixed-position suggestions combobox with editable autocomplete and copyable component code.

020
Live preview
Component usage.wrn
<ComboBox
  label="Fixed-position suggestions"
  name="combobox-20"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
  fixed="true"
/>
Remote & API

JavaScript methods

Live javascript methods combobox with editable autocomplete and copyable component code.

021
Live preview
Component usage.wrn
<ComboBox
  label="JavaScript methods"
  name="combobox-21"
  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",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    }
  ]'
  groups='[]'
  placeholder="Search teams"
/>
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
<ComboBox
  @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=\"ComboBox\"], [data-component=\"ComboBox\"]")

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"ComboBox"No
namestring""No
valuestring""No
optionsunknown[][]No
groupsunknown[][]No
placeholderstring"Search or select an option"No
searchPlaceholderstring"Start typing…"No
clearablebooleantrueNo
allowCustomValuebooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
validationMessagestring""No
helpTextstring""No
loadingbooleanfalseNo
loadingLabelstring"Loading suggestions…"No
emptyLabelstring"No matching options"No
clearLabelstring"Clear value"No
toggleLabelstring"Toggle suggestions"No
searchModestring"contains"No
searchFieldsstring"label,description"No
minSearchLengthnumber0No
searchResultLimitnumber0No
optionTemplatestring"default"No
defaultOpenbooleanfalseNo
closeOnSelectbooleantrueNo
fixedbooleanfalseNo
placementstring"bottom"No
autocompletestring"off"No
remotebooleanfalseNo
remoteUrlstring""No
remoteQueryParamstring"q"No
remoteDebouncenumber250No
remoteAutoLoadbooleantrueNo
infinitebooleanfalseNo
hasMorebooleanfalseNo
pagenumber1No
loadMoreLabelstring"Load more"No
classstring""No