Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - ComboBox
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
${label ? `<label class="react-aria-Label">${label}</label>` : ''} <div class="combobox-container"> <input class="react-aria-Input" type="text" placeholder="${placeholder}" ${this.disabled ? 'disabled' : ''} ${this.required ? 'required' : ''} role="combobox" aria-expanded="false" aria-autocomplete="list" /> ${this.options.clearable ? '<button class="clear-button" type="button">×</button>' : ''} <button class="react-aria-Button" type="button" ${this.disabled ? 'disabled' : ''}> <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"> <path d="M6 9L1.5 4.5L2.5 3.5L6 7L9.5 3.5L10.5 4.5L6 9Z"/> </svg> </button> </div> ${description ? `<div class="react-aria-Text" slot="description">${description}</div>` : ''} <div class="react-aria-FieldError" style="display: none;"></div> <div class="react-aria-Popover" style="display: none;"> <div class="react-aria-ListBox" role="listbox"> ${this.renderItems()} </div> </div> </div> `; this.input = this.container.querySelector('.react-aria-Input'); this.button = this.container.querySelector('.react-aria-Button'); this.popover = this.container.querySelector('.react-aria-Popover'); this.listbox = this.container.querySelector('.react-aria-ListBox'); this.clearButton = this.container.querySelector('.clear-button'); this.errorElement = this.container.querySelector('.react-aria-FieldError'); } renderItems() { if (this.options.sections && this.options.sections.length > 0) { return this.options.sections.map(section => ` <div class="react-aria-ListBoxSection"> <div class="react-aria-Header">${section.name}</div> ${section.items.map((item, index) => ` <div class="react-aria-ListBoxItem" role="option" data-value="${item.value || item}" data-index="${index}"> ${item.label || item} </div> `).join('')} </div> `).join(''); } return this.items.map((item, index) => ` <div class="react-aria-ListBoxItem" role="option" data-value="${item.value || item}" data-index="${index}"> ${item.label || item} </div> `).join(''); } attachEvents() { if (this.disabled) return; this.input.addEventListener('input', (e) => this.handleInput(e)); this.input.addEventListener('keydown', (e) => this.handleKeydown(e)); this.input.addEventListener('focus', () => this.handleFocus()); this.input.addEventListener('blur', (e) => this.handleBlur(e)); this.button.addEventListener('click', () => this.toggle()); if (this.clearButton) { this.clearButton.addEventListener('click', () => this.clear()); } this.listbox.addEventListener('click', (e) => this.handleItemClick(e)); this.listbox.addEventListener('mouseover', (e) => this.handleItemHover(e)); document.addEventListener('click', (e) => { if (!this.container.contains(e.target)) { this.close(); } }); } handleInput(e) { const value = e.target.value; this.filterItems(value); this.open(); this.clearError(); if (this.options.onInputChange) { this.options.onInputChange(value); } } handleKeydown(e) { switch (e.key) { case 'ArrowDown': e.preventDefault(); if (!this.isOpen) { this.open(); } else { this.moveSelection(1); } break; case 'ArrowUp': e.preventDefault(); if (this.isOpen) { this.moveSelection(-1); } break; case 'Enter': e.preventDefault(); if (this.isOpen && this.selectedIndex >= 0) { this.selectItem(this.selectedIndex); } break; case 'Escape': e.preventDefault(); this.close(); break; } } handleFocus() { if (this.options.menuTrigger === 'focus') { this.open(); } } handleBlur(e) { setTimeout(() => { if (!this.container.contains(document.activeElement)) { this.close(); this.validate(); } }, 100); } handleItemClick(e) { const item = e.target.closest('.react-aria-ListBoxItem'); if (item && !item.hasAttribute('data-disabled')) { const index = parseInt(item.dataset.index); this.selectItem(index); } } handleItemHover(e) { const item = e.target.closest('.react-aria-ListBoxItem'); if (item) { this.clearSelection(); item.setAttribute('data-hovered', ''); } } filterItems(query) { if (!query) { this.filteredItems = [...this.items]; } else { this.filteredItems = this.items.filter(item => { const text = item.label || item; return text.toLowerCase().includes(query.toLowerCase()); }); } this.updateListbox(); } updateListbox() { this.listbox.innerHTML = this.filteredItems.map((item, index) => ` <div class="react-aria-ListBoxItem" role="option" data-value="${item.value || item}" data-index="${index}"> ${item.label || item} </div> `).join(''); if (this.filteredItems.length === 0) { this.listbox.innerHTML = '<div class="react-aria-ListBoxItem" style="color: #999; font-style: italic;">No results found</div>'; } } moveSelection(direction) { const items = this.listbox.querySelectorAll('.react-aria-ListBoxItem:not([style*="color: #999"])'); if (items.length === 0) return; this.clearSelection(); if (direction > 0) { this.selectedIndex = Math.min(this.selectedIndex + 1, items.length - 1); } else { this.selectedIndex = Math.max(this.selectedIndex - 1, 0); } if (this.selectedIndex >= 0) { items[this.selectedIndex].setAttribute('data-focused', ''); items[this.selectedIndex].scrollIntoView({ block: 'nearest' }); } } clearSelection() { this.listbox.querySelectorAll('.react-aria-ListBoxItem').forEach(item => { item.removeAttribute('data-focused'); item.removeAttribute('data-hovered'); }); } selectItem(index) { if (index >= 0 && index < this.filteredItems.length) { const item = this.filteredItems[index]; const value = item.value || item; const label = item.label || item; this.input.value = label; this.close(); if (this.options.onSelectionChange) { this.options.onSelectionChange(value); } } } open() { if (this.isOpen || this.disabled) return; this.isOpen = true; this.selectedIndex = -1; this.popover.style.display = 'block'; this.input.setAttribute('aria-expanded', 'true'); if (!this.input.value) { this.filterItems(''); } this.positionPopover(); } close() { if (!this.isOpen) return; this.isOpen = false; this.popover.style.display = 'none'; this.input.setAttribute('aria-expanded', 'false'); this.clearSelection(); } toggle() { if (this.isOpen) { this.close(); } else { this.open(); } } clear() { this.input.value = ''; this.clearError(); if (this.options.onSelectionChange) { this.options.onSelectionChange(null); } } positionPopover() { const inputRect = this.input.getBoundingClientRect(); this.popover.style.position = 'absolute'; this.popover.style.top = '100%'; this.popover.style.left = '0'; this.popover.style.right = '0'; this.popover.style.marginTop = '4px'; this.popover.style.setProperty('--trigger-width', inputRect.width + 'px'); } validate() { if (this.required && !this.input.value) { this.showError('This field is required'); return false; } if (!this.allowCustomValue && this.input.value) { const exists = this.items.some(item => { const label = item.label || item; return label === this.input.value; }); if (!exists) { this.showError('Please select a valid option'); return false; } } this.clearError(); return true; } showError(message) { this.errorElement.textContent = message; this.errorElement.style.display = 'block'; this.input.setAttribute('data-invalid', ''); } clearError() { this.errorElement.style.display = 'none'; this.input.removeAttribute('data-invalid'); } setValue(value) { this.input.value = value; } getValue() { return this.input.value; } setDisabled(disabled) { this.disabled = disabled; this.input.disabled = disabled; this.button.disabled = disabled; if (disabled) { this.container.querySelector('.react-aria-ComboBox').setAttribute('data-disabled', ''); this.close(); } else { this.container.querySelector('.react-aria-ComboBox').removeAttribute('data-disabled'); } } } // Initialize examples document.addEventListener('DOMContentLoaded', () => { // Basic Example new ComboBox(document.getElementById('basic-example'), { label: 'Favorite Animal', placeholder: 'Select an animal...', items: ['Aardvark', 'Cat', 'Dog', 'Kangaroo', 'Panda', 'Snake'], onSelectionChange: (value) => console.log('Selected:', value) }); // Dynamic Example new ComboBox(document.getElementById('dynamic-example'), { label: 'Engineering Major', items: [ { value: 1, label: 'Aerospace' }, { value: 2, label: 'Mechanical' }, { value: 3, label: 'Civil' }, { value: 4, label: 'Biomedical' }, { value: 5, label: 'Nuclear' }, { value: 6, label: 'Industrial' }, { value: 7, label: 'Chemical' }, { value: 8, label: 'Agricultural' }, { value: 9, label: 'Electrical' } ], onSelectionChange: (value) => console.log('Selected major:', value) }); // Custom Values Example new ComboBox(document.getElementById('custom-values-example'), { label: 'Favorite Animal (Custom Values Allowed)', placeholder: 'Type or select...', items: ['Red Panda', 'Cat', 'Dog', 'Aardvark', 'Kangaroo', 'Snake'], allowCustomValue: true, description: 'You can type your own value or select from the list.' }); // Sections Example new ComboBox(document.getElementById('sections-example'), { label: 'Preferred Fruit or Vegetable', sections: [ { name: 'Fruit', items: ['Apple', 'Banana', 'Orange', 'Grapes', 'Watermelon'] }, { name: 'Vegetable', items: ['Cabbage', 'Broccoli', 'Carrots', 'Lettuce', 'Spinach'] } ] }); // Validation Example const validationContainer = document.getElementById('validation-example'); validationContainer.innerHTML = ` <form class="form-example"> <div id="validation-combobox"></div> <button type="submit">Submit</button> </form> `; const validationComboBox = new ComboBox(validationContainer.querySelector('#validation-combobox'), { label: 'Favorite Animal (Required)', items: ['Aardvark', 'Cat', 'Dog', 'Kangaroo', 'Panda', 'Snake'], required: true }); validationContainer.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); if (validationComboBox.validate()) { alert('Form submitted successfully!'); } }); // Disabled Example const disabledContainer = document.getElementById('disabled-example'); disabledContainer.innerHTML = ` <div style="display: flex; gap: 20px; align-items: flex-start;"> <div id="disabled-combobox"></div> <button id="toggle-disabled">Toggle Disabled</button> </div> `; const disabledComboBox = new ComboBox(disabledContainer.querySelector('#disabled-combobox'), { label: 'Favorite Animal', items: ['Aardvark', 'Cat', 'Dog', 'Kangaroo', 'Panda', 'Snake'], disabled: true }); disabledContainer.querySelector('#toggle-disabled').addEventListener('click', () => { disabledComboBox.setDisabled(!disabledComboBox.disabled); }); // Async Example const asyncContainer = document.getElementById('async-example'); asyncContainer.innerHTML = ` <div id="async-combobox"></div> <div id="async-status"></div> `; const asyncComboBox = new ComboBox(asyncContainer.querySelector('#async-combobox'), { label: 'Star Wars Character Lookup', placeholder: 'Type to search...', items: [], allowCustomValue: true, onInputChange: async (value) => { if (value.length > 2) { const statusEl = asyncContainer.querySelector('#async-status'); statusEl.innerHTML = '<div class="loading-indicator"><div class="spinner"></div> Loading...</div>'; try { const response = await fetch(`https://swapi.dev/api/people/?search=${value}`); const data = await response.json(); asyncComboBox.items = data.results.map(person => ({ value: person.name, label: person.name })); asyncComboBox.filterItems(value); statusEl.innerHTML = `Found ${data.results.length} results`; } catch (error) { statusEl.innerHTML = 'Error loading data'; } } } }); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups allow-forms">