Select Component

The Select component provides a modern, customizable dropdown interface for forms. Built with accessibility and user experience in mind, it offers rich functionality including multiple selection, keyboard navigation, and dynamic state management.

Key Features

• Multiple Selection: Support for both single and multiple selection modes

• Keyboard Navigation: Full keyboard support with intuitive controls

• Type-to-Select: Quickly select options by typing their first few letters

• Form Integration: Seamless integration with form data

• Accessibility: ARIA compliance and screen reader support

Keyboard Support

• Arrow Keys: Navigate between options
• Enter/Space: Select focused option
• Tab: Navigate focusable elements
• Escape: Close dropdown

Basic Usage

Create a simple dropdown selection:

1
<Select
2
    label="Choose an Option"
3
    options={{
4
        option1: { value: "1", title: "Option 1", selectedTitle: "First Option" },
5
        option2: { value: "2", title: "Option 2", selectedTitle: "Second Option" },
6
        option3: { value: "3", title: "Option 3" }
7
    }}
8
    subLabel="This is a sublabel"
9
/>

Variants

sizes

Underline Variant

Multiple Selection

Required Selection

Custom Event Listeners

The select component emits a change custom event when options are selected or deselected:

Waiting for events to be emitted… (Click on the select to see the events)

Event Handling

1
select.addEventListener(selectEventNames.Change, (event) => {
2
  const { id, name, selected } = event.detail;
3

4
  type SelectSelectionDetails = {
5
    id?: string;
6
    name?: string;
7
    // Array of selected option values (not the keys)
8
    selected: string[];
9
  };
10
});

Select Functions API

The select component provides a set of functions to interact with programmatically:

Select Component Props API

Option Interface

Error State

The select component supports an error state that can be triggered programmatically by setting the data-state attribute to "error":

1
<Select
2
    data-state="error"
3
    label="Error State Example"
4
    options={{
5
        option1: { value: "1", title: "Option 1" },
6
        option2: { value: "2", title: "Option 2" },
7
        option3: { value: "3", title: "Option 3" }
8
    }}
9
/>