// Generated by scripts/generate-showcase.mjs. Do not edit directly. page ComboBoxDetail { 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 autocomplete" state playground_name = ctx.url.searchParams.get("pg_name") ?? "combobox-1" state playground_value = ctx.url.searchParams.get("pg_value") ?? "" 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\",\"icon\":\"icon-[lucide--life-buoy]\",\"color\":\"#f59e0b\"}]") state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]") state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Search teams" state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Start typing…" state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true" state playground_allowCustomValue = (ctx.url.searchParams.get("pg_allowCustomValue") ?? "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 suggestions…" state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No matching options" state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear value" state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Toggle suggestions" 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_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default" state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true" state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "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_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off" 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_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Combo Box" description = "Editable autocomplete combobox with local and remote suggestions." } view {
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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Default autocomplete"
      name="combobox-1"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Default autocomplete"
      name="combobox-1"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Local HTML options"
      name="combobox-2"
      options="{options}"
      groups="{groups}"
      placeholder="Search teams"
    />
  }
}
Autocomplete

Grouped suggestions

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

03
Live preview
Component usage.wrn
page ComboBoxExample {
  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",
        "icon": "icon-[lucide--life-buoy]",
        "color": "#f59e0b"
      }
    ]
  }
]
  view {
    <ComboBox
      label="Grouped suggestions"
      name="combobox-3"
      options="{options}"
      groups="{groups}"
      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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Minimum search length"
      name="combobox-4"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Search result limit"
      name="combobox-5"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Starts-with matching"
      name="combobox-6"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Search labels and descriptions"
      name="combobox-7"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Suggestions with icons"
      name="combobox-8"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Suggestions with avatars"
      name="combobox-9"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Suggestions with color indicators"
      name="combobox-10"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Clearable value"
      name="combobox-11"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Custom text values"
      name="combobox-12"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Preselected value"
      name="combobox-13"
      value="engineering"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Disabled combobox"
      name="combobox-14"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Validation state"
      name="combobox-15"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Remote data with automatic preload"
      name="combobox-16"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Remote search API"
      name="combobox-17"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Remote query parameters"
      name="combobox-18"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Infinite remote suggestions"
      name="combobox-19"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="Fixed-position suggestions"
      name="combobox-20"
      options="{options}"
      groups="{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
page ComboBoxExample {
  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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]
  state groups = []
  view {
    <ComboBox
      label="JavaScript methods"
      name="combobox-21"
      options="{options}"
      groups="{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
} }