Basic Usage
Simple dropdown with arrow indicator
Apple
Banana
Cherry
Date
Selected: apple
<rich-select arrow>
<rich-option value="apple">Apple</rich-option>
<rich-option value="banana">Banana</rich-option>
<rich-option value="cherry">Cherry</rich-option>
</rich-select>
With Search
Searchable dropdown for long lists
Argentina
Australia
Brazil
Canada
Denmark
Egypt
France
Germany
India
Japan
South Korea
Mexico
Selected: argentina
<rich-select arrow search placeholder="Type to filter...">
<rich-option value="argentina">Argentina</rich-option>
...
</rich-select>
Pre-selected Value
Select with default selected option
Small
Medium
Large
X-Large
Selected: medium
<rich-select arrow animated>
<rich-option value="small">Small</rich-option>
<rich-option value="medium" selected>Medium</rich-option>
<rich-option value="large">Large</rich-option>
</rich-select>
Disabled Options
Some options can be disabled
Free Plan
Pro Plan
Enterprise (Contact Sales)
Custom Plan
Selected: free
<rich-select arrow>
<rich-option value="free">Free Plan</rich-option>
<rich-option value="enterprise" disabled>Enterprise</rich-option>
</rich-select>
Disabled Select
Entire select can be disabled
Option 1
Option 2
Option 3
Selected: opt1 (disabled)
<rich-select arrow disabled>
<rich-option value="opt1">Option 1</rich-option>
...
</rich-select>
Custom Search Records
Use record attribute for enhanced search
Smile
Heart
Star
Fire
Rocket
Selected: smile
<rich-select arrow search>
<rich-option value="smile" record="emoji face happy">Smile</rich-option>
<rich-option value="heart" record="emoji love heart">Heart</rich-option>
</rich-select>
Dark Mode
Automatic dark mode with .dark class
Dark Theme
Light Theme
System Default
Custom Theme
Selected: system
<div class="dark">
<rich-select arrow search>...</rich-select>
</div>
Custom Styling
Fully customizable with CSS custom properties
Design
Development
Deployment
Monitoring
Selected: design
rich-select {
--caller-background: linear-gradient(135deg, #667eea, #764ba2);
--caller-color: white;
--caller-border: none;
--caller-border-radius: 12px;
--option-active-background: #667eea;
}
Event Handling
Listen for change events to respond to selections
Electronics
Clothing
Books
Home & Garden
Sports & Outdoors
Event log: Waiting for selection...
const select = document.querySelector('rich-select');
select.addEventListener('change', (e) => {
console.log('Selected:', e.detail.value);
console.log('Name:', e.detail.name);
});