Combobox

The Combobox component provides searchable and selectable option lists using semantic custom elements.

Ignix Lite comboboxes support keyboard accessibility, filtering, intents, chips, and multiple selection without external dependencies.

---

Intent Variants

Preview

• Apple
• Banana
• Orange

• Node
• Express
• MongoDB

• Validate
• Check Input
• Review

• Delete
• Remove
• Archive

• Premium
• Featured
• Trending

Code

<ix-combobox data-intent="primary">

  <label part="control">
    <input placeholder="Primary..." />
    <button data-clear>Clear</button>
  </label>

  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
  </ul>

</ix-combobox>

<ix-combobox data-intent="success">

  <label part="control">
    <input placeholder="Success..." />
    <button data-clear>Clear</button>
  </label>

  <ul>
    <li>Node</li>
    <li>Express</li>
    <li>MongoDB</li>
  </ul>

</ix-combobox>

<ix-combobox data-intent="warning">

  <label part="control">
    <input placeholder="Warning..." />
    <button data-clear>Clear</button>
  </label>

  <ul>
    <li>Validate</li>
    <li>Check Input</li>
    <li>Review</li>
  </ul>

</ix-combobox>

<ix-combobox data-intent="danger">

  <label part="control">
    <input placeholder="Danger..." />
    <button data-clear>Clear</button>
  </label>

  <ul>
    <li>Delete</li>
    <li>Remove</li>
    <li>Archive</li>
  </ul>

</ix-combobox>

<ix-combobox data-intent="gradient">

  <label part="control">
    <input placeholder="Gradient..." />
    <button data-clear>Clear</button>
  </label>

  <ul>
    <li>Premium</li>
    <li>Featured</li>
    <li>Trending</li>
  </ul>

</ix-combobox>

---

Multiple Select

Preview

• React
• Vue
• Angular
• Svelte
• Solid

Code

<ix-combobox
  multiple
  data-intent="success"
>

  <label part="control">

    <output data-chips></output>

    <input placeholder="Select multiple..." />

    <button data-clear>
      Clear
    </button>

  </label>

  <ul>
    <li>React</li>
    <li>Vue</li>
    <li>Angular</li>
    <li>Svelte</li>
    <li>Solid</li>
  </ul>

</ix-combobox>

Usage

Preview

Tech Stack Selection

Select frameworks used in your current project.

• React
• Next.js
• Vue
• Angular
• Node.js
• Express
• MongoDB
• PostgreSQL

Code

<div>

  <h4>
    Tech Stack Selection
  </h4>

  <p>
    Select frameworks used in your current project.
  </p>

  <ix-combobox
    multiple
    data-intent="primary"
  >

    <label part="control">

      <output data-chips></output>

      <input placeholder="Choose technologies..." />

      <button data-clear>
        Clear
      </button>

    </label>

    <ul>
      <li>React</li>
      <li>Next.js</li>
      <li>Vue</li>
      <li>Angular</li>
      <li>Node.js</li>
      <li>Express</li>
      <li>MongoDB</li>
      <li>PostgreSQL</li>
    </ul>

  </ix-combobox>

</div>

Attributes

Attribute	Type	Description
multiple	boolean	Enables multiple selection
data-intent	'primary' | 'success' | 'warning' | 'danger' | 'gradient'	Applies semantic styling
data-clear	attribute	Clears current selection
data-chips	attribute	Displays selected values as chips
data-selected	boolean	Marks selected option
data-active	boolean	Marks active keyboard option