Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - select
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
0) { selectedValues.forEach(value => { const tag = document.createElement('div'); tag.className = 'multi-select-tag'; tag.innerHTML = `${value.label} <button onclick="removeValue('${value.value}')">×</button>`; valuesContainer.appendChild(tag); }); multiPlaceholder.style.display = 'none'; clearBtn.style.display = 'block'; } else { multiPlaceholder.style.display = 'block'; clearBtn.style.display = 'none'; } } else { if (selectedValues) { placeholder.textContent = selectedValues.label; placeholder.classList.remove('select-placeholder'); clearBtn.style.display = 'block'; } else { placeholder.textContent = hasIcon ? 'Select an option...' : isAsync ? 'Type to search...' : allowCustom ? 'Select or create...' : 'Select an option...'; placeholder.classList.add('select-placeholder'); clearBtn.style.display = 'none'; } } } function toggleDropdown() { const isOpen = dropdown.classList.contains('open'); dropdown.classList.toggle('open'); chevron.classList.toggle('open'); if (isAsync && !isOpen) { setTimeout(() => { dropdown.innerHTML = ` <div class="select-option" data-value="1">Option 1</div> <div class="select-option" data-value="2">Option 2</div> <div class="select-option" data-value="3">Option 3</div> `; attachOptionListeners(); }, 1000); } } function attachOptionListeners() { const options = dropdown.querySelectorAll('.select-option'); options.forEach(option => { option.addEventListener('click', function() { const value = this.getAttribute('data-value'); const label = this.textContent; if (isMulti) { const exists = selectedValues.find(v => v.value === value); if (!exists) { selectedValues.push({value, label}); } } else { selectedValues = {value, label}; } updateDisplay(); if (!isMulti) { dropdown.classList.remove('open'); chevron.classList.remove('open'); } }); }); } select.addEventListener('click', toggleDropdown); if (clearBtn) { clearBtn.addEventListener('click', function(e) { e.stopPropagation(); selectedValues = isMulti ? [] : null; updateDisplay(); }); } window.removeValue = function(valueToRemove) { if (isMulti) { selectedValues = selectedValues.filter(v => v.value !== valueToRemove); updateDisplay(); } }; document.addEventListener('click', function(e) { if (!select.contains(e.target) && !dropdown.contains(e.target)) { dropdown.classList.remove('open'); chevron.classList.remove('open'); } }); if (allowCustom) { let searchTimeout; select.addEventListener('input', function(e) { clearTimeout(searchTimeout); searchTimeout = setTimeout(() => { const searchValue = e.target.value; if (searchValue && !customOptions.find(opt => opt.label === searchValue)) { const createOption = document.createElement('div'); createOption.className = 'select-option create-option'; createOption.textContent = `Create "${searchValue}"`; createOption.addEventListener('click', function() { const newOption = {value: searchValue, label: searchValue}; customOptions.push(newOption); selectedValues = newOption; updateDisplay(); dropdown.classList.remove('open'); chevron.classList.remove('open'); }); dropdown.appendChild(createOption); } }, 300); }); } attachOptionListeners(); updateDisplay(); } setupSelect('basic-select', 'basic-dropdown', 'basic-clear'); setupSelect('multi-select', 'multi-dropdown', 'multi-clear', true); setupSelect('async-select', 'async-dropdown', 'async-clear', false, false, true); setupSelect('custom-select', 'custom-dropdown', 'custom-clear', false, false, false, true); setupSelect('icon-select', 'icon-dropdown', 'icon-clear', false, true); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">