README.md

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

Component	Props	Type	Description
SelectValue?	selectedIndex	number	The selected option
OptionListWrapper?	children	React.ReactNode	Wraps all options
OptionValue?	option isSelected isFocused	string boolean boolean	Wraps each option
Icon?		React.ElementType	Any html/jsx can be used as an icon