Tungsten UI đź’ˇ

Tungsten UI đź’ˇ

Combobox

Two variants of combobox components: a simple select dropdown using native HTML, and an advanced autocomplete version with search functionality. Perfect for single-option selection from predefined lists.

Basic Examples

Simple Select

<c-combobox :options="[('django', 'Django'), ('vuejs', 'Vue.js'), ('react', 'React')]" />

With Autocomplete

<c-combobox-autocomplete :options="[('django', 'Django'), ('vuejs', 'Vue.js'), ('react', 'React')]" />

Component API

Simple Combobox (<c-combobox>)

Property Type Default Description
options list - List of tuples (value, label) for dropdown options (required)
label string - Label text displayed above the select
placeholder string "--SĂ©lectionnez une option--" Placeholder text for empty option
name string - Name attribute for form submission
size string md Size of the select: xs, sm, md, lg
disabled boolean false Whether the select is disabled
class string - Additional CSS classes for styling

Autocomplete Combobox (<c-combobox-autocomplete>)

Property Type Default Description
options list - List of tuples (value, label) for dropdown options (required)
label string - Label text displayed above the input
placeholder string "Tapez pour rechercher..." Placeholder text shown in search input
name string - Name attribute for form submission (hidden input)
size string md Size of the input: xs, sm, md, lg
disabled boolean false Whether the input is disabled
class string - Additional CSS classes for the input

Examples

Basic Usage

Choose between simple select dropdown or autocomplete input based on your needs.

Simple Select

<c-combobox :options="[('python', 'Python'), ('javascript', 'JavaScript')]" />

Autocomplete Search

<c-combobox-autocomplete :options="[('python', 'Python'), ('javascript', 'JavaScript')]" />

With Labels

Add descriptive labels to provide context for the selection.

Simple Select

<c-combobox 
    :options="[('django', 'Django'), ('flask', 'Flask')]" 
    label="Framework Python"
    name="python_framework" />

Autocomplete

<c-combobox-autocomplete 
    :options="[('frontend', 'Frontend Developer'), ('backend', 'Backend Developer')]" 
    label="Poste recherché"
    name="job_position" />

Different Sizes

Available in multiple sizes to fit different UI contexts.

Simple Select

xs:
sm:
md:
lg:

Autocomplete

xs:
sm:
md:
lg: 
<!-- Simple select -->
<c-combobox :options="[...]" size="xs" />
<c-combobox :options="[...]" size="lg" />

<!-- Autocomplete -->
<c-combobox-autocomplete :options="[...]" size="xs" />
<c-combobox-autocomplete :options="[...]" size="lg" />

Form Integration

Both components work seamlessly with HTML forms. The selected value is submitted with the specified name attribute.

Simple Select Form

Autocomplete Form

<!-- Simple select form -->
<form>
    <c-combobox 
        :options="[('frontend', 'Frontend Developer')]" 
        label="Poste"
        name="job_position" />
    <c-button type="submit">Envoyer</c-button>
</form>

<!-- Autocomplete form -->
<form>
    <c-combobox-autocomplete 
        :options="[('frontend', 'Frontend Developer')]" 
        label="Poste recherché"
        name="job_position" />
    <c-button type="submit">Envoyer</c-button>
</form>

Disabled State

Both components can be disabled when interaction should be prevented.

Simple Select

<c-combobox 
    :options="[('option1', 'Option 1')]" 
    label="Sélection désactivée"
    :disabled=True />

Autocomplete

<c-combobox-autocomplete 
    :options="[('option1', 'Option 1')]" 
    label="Recherche désactivée"
    :disabled=True />

Autocomplete Features

The autocomplete version includes advanced search and navigation capabilities.

🔍 Recherche en temps réel

Filtrage automatique des options pendant la saisie

⌨️ Navigation clavier

Flèches ↑/↓ pour naviguer, Entrée pour sélectionner

🎯 Sélection visuelle

Mise en surbrillance de l'option active

❌ Aucun résultat

Message informatif quand aucune option ne correspond

<c-combobox-autocomplete 
    :options="[('javascript', 'JavaScript'), ('python', 'Python'), ('java', 'Java')]" 
    label="Langage de programmation"
    placeholder="Tapez pour filtrer..."
    name="language" />

Events

Simple Combobox Events

Event Description Detail
change Standard HTML change event when an option is selected event.target.value 
// Listen for select changes
document.querySelector('select').addEventListener('change', function(event) {
    console.log('Selected value:', event.target.value);
    console.log('Selected text:', event.target.selectedOptions[0].text);
});

Autocomplete Events

Event Description Detail
combobox-change Custom event fired when an option is selected { value: string, text: string } 
// Listen for autocomplete selection
document.addEventListener('combobox-change', function(event) {
    console.log('Selected value:', event.detail.value);
    console.log('Selected text:', event.detail.text);
});

// Or listen on a specific combobox
const combobox = document.querySelector('[data-combobox-autocomplete]');
combobox.addEventListener('combobox-change', function(event) {
    console.log('This combobox changed:', event.detail);
});

Usage Guidelines

Two Variants Available

Use <c-combobox> for simple selection with native HTML select, or <c-combobox-autocomplete> for advanced search and filtering capabilities.

Best Practices

• Use clear, descriptive option labels
• Choose simple select for small lists (< 10 options)
• Choose autocomplete for large lists or when search is helpful
• Always include a name attribute for form submission
• Provide meaningful placeholders and labels

Accessibility

Both components include accessibility features. Simple select uses native HTML for maximum compatibility, while autocomplete includes ARIA support and keyboard navigation (↑/↓, Enter, Escape).