<Select
  label="Pick a fruit"
  icon="right-arrow"
  options={[
    { label: 'Apple', value: 'apple', selected: true },
    { label: 'Banana', value: 'banana', selected: false },
    { label: 'Cherry', value: 'cherry', selected: false },
  ]}
/>

View Code

Overview

The Select component is a styled dropdown menu used internally by ThemeSelect and can be used for language selection. It renders a native <select> element with custom styling.

Props

Prop	Type	Description
`label`	`string`	Accessible label for the select (rendered as `aria-label`)
`icon`	`string`	Icon name to display alongside the dropdown
`options`	`SelectOption[]`	Array of option objects
`width`	`string`	Optional CSS width value
`onChange`	`(value: string) => void`	Callback when selection changes

SelectOption Interface

interface SelectOption {
  label: string;    // Display text
  value: string;    // Option value
  selected: boolean; // Whether this option is currently selected
}

Features

Renders a native <select> for accessibility
Custom-styled with icon support
Includes a caret indicator
Screen-reader-only label via .sr-only class
Used as the base for ThemeSelect and language selection

Styling

The component uses these CSS classes:

.sl-select — Outer wrapper
.icon — Icon container
.label-icon — Icon element
.caret — Dropdown arrow indicator
.sr-only — Visually hidden accessible label