Combobox

A searchable single-select field. The user types to filter options; selecting one sets the value. Keyboard navigation (Arrow, Enter, Escape) is fully supported. Use lt-select when no filtering is needed.

Playground

Controls

Value

Label

Placeholder

Helper Text

Variant

Size

Disabled

Required

Name

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-combobox
id="country-picker"
label="Country"
placeholder="Search countries…"
required></lt-combobox>

<script type="module">
const cb = document.getElementById('country-picker');
cb.options = [
  { value: 'us', label: 'United States' },
  { value: 'ca', label: 'Canada' },
  { value: 'gb', label: 'United Kingdom' },
  { value: 'de', label: 'Germany' },
  { value: 'fr', label: 'France' }
];
cb.addEventListener('change', (e) => {
  console.log('selected', e.detail.value, e.detail.label);
});
</script>

import { Combobox } from '@latty-ds/react';

const countries = [
{ value: 'us', label: 'United States' },
{ value: 'ca', label: 'Canada' },
{ value: 'gb', label: 'United Kingdom' }
];

<Combobox
label="Country"
placeholder="Search countries…"
options={countries}
onChange={(e) => console.log(e.detail.value)}
required
/>

<template>
<lt-combobox
  label="Country"
  placeholder="Search countries…"
  :options="countries"
  @change="(e) => selected = e.detail.value"
/>
</template>

API