React simple styleable and accessible select

This is a simple animatable select implementation which is customisable via several components that can be passed in. It uses the ARIA combobox pattern for accessibility and is modelled after the sonder-ui select (see the linked page for more notes on accessibility).

Demo

Stackblitz demo

Installation and usage

npm install react-simple-stylable-select

Usage:

import { Select } from "react-simple-stylable-select";

const countries = ["France", "South Africa", "Japan", "Antigua and Barbuda", "Argentina", "United Kingdom"];

<Select
  name="select"
  options={countries}
  defaultValue="United Kingdom"
  components={{
    SelectValue: ({ selectedIndex }: { selectedIndex: number }) => (
      <div
        style={{
          minWidth: '200px',
          padding: '0.5rem 2rem 0.5rem 0.5rem',
          border: '2px solid #eee',
          background: '#f9f9f9',
          color: '#111',
        }}
      >
        {countries[selectedIndex]}
      </div>
    ),
    OptionListWrapper: ({ children }: { children: React.ReactNode }) => (
      <div
        style={{
          backgroundColor: '#eee',
          color: '#111',
        }}
      >
        {children}
      </div>
    ),
    OptionValue: ({
      option,
      isSelected,
      isFocused,
    }: {
      option: string;
      isSelected: boolean;
      isFocused: boolean;
    }) => (
      <div
        style={{
          padding: '0.5rem',
          outlineOffset: '-2px',
          outline: isFocused ? '2px solid #ccc' : 'none',
          background: isSelected ? '#ccc' : 'none',
        }}
      >
        {isSelected ? '✓ ' : ''}
        {option}
      </div>
    ),
  }}
/>

Props

Prop	Type	Description
`name`	`string`	The name of the Select when submitted as part of a form
`options`	`string[]`	List of options
`id?`	`string`	HTML `id` attribute, it is passed inside
`value?`	`string`	Controllable value which can be used to set the value of the Select
`defaultValue?`	`string`	Initial value of the Select
`onChange?`	`(value: string) => void`	A callback function which is called when the value of the Select changes
`components?`	`DisplayComponents`	Components which allow additional html/jsx and styling to be added (see table below)

Anatomy

Display components