Combobox — ARC UI

Components

Combobox

input

interactive

<arc-combobox>

Overview

Guidelines

When to use

Use Combobox when the option list exceeds 7-10 items and users benefit from filtering by typing
Provide clear, distinct labels on every <arc-option> so filtering produces meaningful results
Set a descriptive placeholder like "Search countries..." to indicate the field is searchable
Include a label attribute for accessibility -- it renders a visible label above the input
Listen to arc-change to capture the selected value and sync it with your application state

When not to use

Use Combobox for short lists (under 5 items) where a simple Select is faster
Omit the value attribute on <arc-option> -- the component needs it to track selection
Place non-<arc-option> elements in the default slot; they will be ignored by the filter logic
Rely on Combobox for free-text entry -- it only accepts values from the predefined option set
Disable the component without providing a visual explanation of why it is unavailable

Features

Type-ahead filtering that narrows options as the user types
Declarative option list via <arc-option> children with value and label attributes
Full keyboard navigation: ArrowDown, ArrowUp, Enter to select, Escape to dismiss
WAI-ARIA combobox pattern with role, aria-expanded, aria-controls, and aria-activedescendant
Visual active highlight and selected-state accent color on the current option
Automatic close on outside click via a document-level event listener
Configurable label, placeholder, and disabled state
"No results found" empty state when the query matches zero options

Preview

React

Vue

Angular

Svelte

Solid

Preact

Lit

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-combobox label="Select Fruit" placeholder="Type to search...">
  <arc-option value="apple">Apple</arc-option>
  <arc-option value="banana">Banana</arc-option>
  <arc-option value="cherry">Cherry</arc-option>
</arc-combobox>

import { Combobox, Option } from '@arclux/arc-ui-react';

<Combobox label="Select Fruit" placeholder="Type to search...">
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
  <Option value="cherry">Cherry</Option>
</Combobox>

<script setup>
import { Combobox, Option } from '@arclux/arc-ui-vue';
</script>

<template>
  <Combobox label="Select Fruit" placeholder="Type to search...">
    <Option value="apple">Apple</Option>
    <Option value="banana">Banana</Option>
    <Option value="cherry">Cherry</Option>
  </Combobox>
</template>

<script>
  import { Combobox, Option } from '@arclux/arc-ui-svelte';
</script>

<Combobox label="Select Fruit" placeholder="Type to search...">
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
  <Option value="cherry">Cherry</Option>
</Combobox>

import { Component } from '@angular/core';
import { Combobox, Option } from '@arclux/arc-ui-angular';

@Component({
  imports: [Combobox, Option],
  template: `
    <Combobox label="Select Fruit" placeholder="Type to search...">
      <Option value="apple">Apple</Option>
      <Option value="banana">Banana</Option>
      <Option value="cherry">Cherry</Option>
    </Combobox>
  `,
})
export class MyComponent {}

import { Combobox, Option } from '@arclux/arc-ui-solid';

<Combobox label="Select Fruit" placeholder="Type to search...">
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
  <Option value="cherry">Cherry</Option>
</Combobox>

import { Combobox, Option } from '@arclux/arc-ui-preact';

<Combobox label="Select Fruit" placeholder="Type to search...">
  <Option value="apple">Apple</Option>
  <Option value="banana">Banana</Option>
  <Option value="cherry">Cherry</Option>
</Combobox>

API

Prop	Type	Default	Description
`value`	`string`	`''`	The currently selected option value. Reflected as an attribute so it can be read from the DOM. Updated automatically when the user selects an option.
`placeholder`	`string`	`''`	Placeholder text shown in the input when no value is entered.
`label`	`string`	`''`	Visible label rendered above the input. Also used as the accessible label for the combobox.
`disabled`	`boolean`	`false`	Disables the input and prevents interaction. The host element receives reduced opacity and pointer-events: none.

Events

Event	Description
`arc-change`	Fired when an option is selected. `event.detail.value` contains the selected option value.