Select Component

Quick Start

Get started with the Select component in 3 simple steps:

1 Include Required Files

2 Add HTML Markup

    United States
    United Kingdom
    Canada
    Australia

3 Initialize (Automatic)

The Select component initializes automatically on page load. No additional JavaScript required!

Data Attributes API

Configure the select component using data attributes. All features are opt-in via attributes.

Basic Configuration

Multi-Select Configuration

Search & Filter Configuration

Appearance Configuration

Form Integration Configuration

Option Configuration

Configure individual options using standard <option> elements or data attributes.

Using <option> Elements

    Active
    Inactive
    Pending

Option Data Attributes

Options with Icons and Descriptions

    
        Email Notifications
    
    
        SMS Notifications
    
    
        Push Notifications
    

Using JSON Options

JavaScript API

Programmatically control select components using the RSL.Select API.

Methods

Example Usage

// Get the original select element
var selectElement = document.querySelector('[data-rsl-select]');

// Get current value(s)
var values = RSL.Select.getValue(selectElement);
console.log(values); // ["us", "ca"]

// Set value programmatically
RSL.Select.setValue(selectElement, 'uk');

// Set multiple values
RSL.Select.setValue(selectElement, ['us', 'uk', 'ca']);

// Listen for changes
selectElement.addEventListener('rsl-select-change', function(e) {
    console.log('Selected:', e.detail.values);
    console.log('Options:', e.detail.options);
});

FilterBus Integration

The Select component supports bidirectional FilterBus integration - it can both publish selection changes to control other components AND subscribe to filter state changes to update its own selection or visibility.

FilterBus Attributes

Publishing Selection Changes

Use a Select as a filter control that drives other components:

<!-- Select publishes region changes to FilterBus -->
<div data-rsl-select
     data-filterbus-publish="region"
     data-rsl-select-placeholder="Select Region...">
    <option value="All">All Regions</option>
    <option value="North">North Region</option>
    <option value="South">South Region</option>
    <option value="East">East Region</option>
    <option value="West">West Region</option>
</div>

<!-- KPI Cards subscribe to the region filter -->
<div data-rsl-kpi-card
     data-filterbus-subscribe="region"
     data-filter-value="North">
    <!-- This card shows only when "North" or "All" is selected -->
</div>

Subscribing to Filter State

Sync a Select's selection with another filter control:

<!-- Filter buttons publish to "region" key -->
<div data-rsl-filter data-filter-key="region">
    <button data-filter-value="All">All</button>
    <button data-filter-value="North">North</button>
    <button data-filter-value="South">South</button>
</div>

<!-- This select syncs with the filter buttons -->
<div data-rsl-select
     data-filterbus-subscribe="region"
     data-rsl-select-placeholder="Select Region...">
    <option value="All">All Regions</option>
    <option value="North">North Region</option>
    <option value="South">South Region</option>
</div>

Visibility Filtering

Show/hide a Select based on another filter:

<!-- This select only shows when category is "Advanced" -->
<div data-rsl-select
     data-filterbus-subscribe="category"
     data-filter-value="Advanced"
     data-rsl-select-placeholder="Advanced Options...">
    <option value="opt1">Option 1</option>
    <option value="opt2">Option 2</option>
</div>

FilterBus JavaScript API

Events

Accessibility

The Select component is fully WCAG 2.1 AA compliant with comprehensive accessibility features built-in.

Keyboard Navigation

ARIA Attributes

The component automatically manages all necessary ARIA attributes:

• role="listbox" on dropdown
• role="option" on each option
• aria-haspopup="listbox" on trigger
• aria-expanded indicates dropdown state
• aria-selected indicates selected options
• aria-disabled on disabled options
• aria-multiselectable for multi-select
• aria-label with descriptive text for all interactive elements

Screen Reader Support

• Announces current selection state
• Announces when dropdown opens/closes
• Announces focused option as user navigates
• Announces selected/deselected state changes
• Announces multi-select count ("3 items selected")
• Descriptive labels for all icons and actions

Browser Support

Next Steps