Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - Select
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
${this.options.label ? `<label class="react-aria-Label">${this.options.label}</label>` : ''} <button class="react-aria-Button" type="button" aria-haspopup="listbox" aria-expanded="${this.isOpen}" ${this.isDisabled ? 'disabled' : ''}> <span class="react-aria-SelectValue" ${isPlaceholder ? 'data-placeholder' : ''}>${displayValue}</span> <span class="chevron-icon">▼</span> </button> ${this.options.description ? `<span class="react-aria-Text" slot="description">${this.options.description}</span>` : ''} ${this.options.errorMessage ? `<span class="react-aria-FieldError">${this.options.errorMessage}</span>` : ''} <div class="react-aria-Popover" style="display: ${this.isOpen ? 'block' : 'none'}; position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;"> <div class="react-aria-ListBox" role="listbox"> ${this.renderItems()} </div> </div> </div> `; this.button = this.container.querySelector('.react-aria-Button'); this.popover = this.container.querySelector('.react-aria-Popover'); this.listbox = this.container.querySelector('.react-aria-ListBox'); } renderItems() { return this.items.map((item, index) => { if (item.type === 'section') { return ` <div class="react-aria-ListBoxSection"> <div class="react-aria-Header">${item.label}</div> ${item.items.map(subItem => this.renderItem(subItem, index)).join('')} </div> `; } return this.renderItem(item, index); }).join(''); } renderItem(item, index) { const isSelected = this.selectedValue === item.value; const isFocused = this.focusedIndex === index; const isDisabled = item.disabled || false; return ` <div class="react-aria-ListBoxItem" role="option" data-value="${item.value}" ${isSelected ? 'data-selected' : ''} ${isFocused ? 'data-focused' : ''} ${isDisabled ? 'data-disabled' : ''} aria-selected="${isSelected}"> ${item.label} ${item.description ? `<span class="react-aria-Text" slot="description">${item.description}</span>` : ''} </div> `; } attachEvents() { this.button.addEventListener('click', (e) => { if (!this.isDisabled) { this.toggle(); } }); this.button.addEventListener('keydown', (e) => { if (this.isDisabled) return; switch(e.key) { case 'Enter': case ' ': e.preventDefault(); this.toggle(); break; case 'ArrowDown': e.preventDefault(); if (!this.isOpen) { this.open(); } else { this.focusNext(); } break; case 'ArrowUp': e.preventDefault(); if (!this.isOpen) { this.open(); } else { this.focusPrevious(); } break; case 'Escape': if (this.isOpen) { this.close(); } break; } }); this.container.addEventListener('click', (e) => { const item = e.target.closest('.react-aria-ListBoxItem'); if (item && !item.hasAttribute('data-disabled')) { const value = item.getAttribute('data-value'); this.selectValue(value); this.close(); } }); document.addEventListener('click', (e) => { if (!this.container.contains(e.target)) { this.close(); } }); } toggle() { if (this.isOpen) { this.close(); } else { this.open(); } } open() { this.isOpen = true; this.onOpenChange(true); this.render(); this.button.focus(); } close() { this.isOpen = false; this.focusedIndex = -1; this.onOpenChange(false); this.render(); } selectValue(value) { this.selectedValue = value; this.onSelectionChange(value); this.render(); } focusNext() { const enabledItems = this.items.filter(item => !item.disabled); if (enabledItems.length > 0) { this.focusedIndex = Math.min(this.focusedIndex + 1, enabledItems.length - 1); this.render(); } } focusPrevious() { if (this.focusedIndex > 0) { this.focusedIndex = Math.max(this.focusedIndex - 1, 0); this.render(); } } setDisabled(disabled) { this.isDisabled = disabled; this.render(); } setItems(items) { this.items = items; this.render(); } setValue(value) { this.selectedValue = value; this.render(); } } // Initialize examples // Basic Select new SelectComponent(document.getElementById('basic-select'), { label: 'Favorite Animal', placeholder: 'Select an animal', items: [ { value: 'aardvark', label: 'Aardvark' }, { value: 'cat', label: 'Cat' }, { value: 'dog', label: 'Dog' }, { value: 'kangaroo', label: 'Kangaroo' }, { value: 'panda', label: 'Panda' }, { value: 'snake', label: 'Snake' } ] }); // Controlled Select const controlledSelect = new SelectComponent(document.getElementById('controlled-select'), { label: 'Pick an animal (controlled)', defaultValue: 'bison', items: [ { value: 'koala', label: 'Koala' }, { value: 'kangaroo', label: 'Kangaroo' }, { value: 'platypus', label: 'Platypus' }, { value: 'bald-eagle', label: 'Bald Eagle' }, { value: 'bison', label: 'Bison' }, { value: 'skunk', label: 'Skunk' } ], onSelectionChange: (value) => { const item = controlledSelect.items.find(item => item.value === value); document.getElementById('selected-value').textContent = item ? item.label : 'None'; } }); // Sections Select new SelectComponent(document.getElementById('sections-select'), { label: 'Preferred fruit or vegetable', items: [ { type: 'section', label: 'Fruit', items: [ { value: 'apple', label: 'Apple' }, { value: 'banana', label: 'Banana' }, { value: 'orange', label: 'Orange' }, { value: 'grapes', label: 'Grapes' } ] }, { type: 'section', label: 'Vegetable', items: [ { value: 'cabbage', label: 'Cabbage' }, { value: 'broccoli', label: 'Broccoli' }, { value: 'carrots', label: 'Carrots' }, { value: 'lettuce', label: 'Lettuce' } ] } ] }); // Disabled Options Select new SelectComponent(document.getElementById('disabled-select'), { label: 'Favorite Animal', items: [ { value: 'red-panda', label: 'Red Panda' }, { value: 'cat', label: 'Cat', disabled: true }, { value: 'dog', label: 'Dog' }, { value: 'aardvark', label: 'Aardvark' }, { value: 'kangaroo', label: 'Kangaroo', disabled: true }, { value: 'snake', label: 'Snake' } ] }); // Validation Select const validationSelect = new SelectComponent(document.getElementById('validation-select'), { label: 'Favorite Animal', placeholder: 'Select an animal', isRequired: true, items: [ { value: 'aardvark', label: 'Aardvark' }, { value: 'cat', label: 'Cat' }, { value: 'dog', label: 'Dog' }, { value: 'kangaroo', label: 'Kangaroo' }, { value: 'panda', label: 'Panda' }, { value: 'snake', label: 'Snake' } ] }); document.getElementById('validation-form').addEventListener('submit', (e) => { e.preventDefault(); if (!validationSelect.selectedValue) { validationSelect.options.errorMessage = 'Please select an animal'; validationSelect.render(); } else { validationSelect.options.errorMessage = ''; validationSelect.render(); alert('Form submitted successfully!'); } }); // Description Select new SelectComponent(document.getElementById('description-select'), { label: 'Favorite Animal', description: 'Please select your favorite animal from the list.', items: [ { value: 'aardvark', label: 'Aardvark' }, { value: 'cat', label: 'Cat' }, { value: 'dog', label: 'Dog' }, { value: 'kangaroo', label: 'Kangaroo' }, { value: 'panda', label: 'Panda' }, { value: 'snake', label: 'Snake' } ] }); // Controlled Open State Select const openStateSelect = new SelectComponent(document.getElementById('open-state-select'), { label: 'Choose frequency', items: [ { value: 'rarely', label: 'Rarely' }, { value: 'sometimes', label: 'Sometimes' }, { value: 'always', label: 'Always' } ], onOpenChange: (isOpen) => { const statusEl = document.getElementById('open-status'); statusEl.textContent = isOpen ? 'open' : 'closed'; statusEl.className = `status-indicator ${isOpen ? 'status-open' : 'status-closed'}`; } }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">