Popularity
2.1
Stable
Activity
4.3
Growing
103
3
16

Description

A customisable, touchable, React single-select / multi-select form control.

Built with keyboard and screen reader accessibility in mind.

Monthly Downloads: 0
Programming language: TypeScript
License: MIT License
Tags: UI Components     Select     React     Multiselect    
Latest version: v6.0.3

React Responsive Select alternatives and similar libraries

Based on the "Select" category.
Alternatively, view React Responsive Select alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of React Responsive Select or a related project?

Add another 'Select' Library

README

react-responsive-select

Build status

A customisable, touchable, React single-select / multi-select form control.

Built with keyboard and screen reader accessibility in mind.

Features

  • Single and Multi select modes
  • Accessible WAI ARIA compliance
  • Touch friendly
  • Keyboard friendly
  • Similar interaction experience across platforms
  • Custom label rendering
  • Custom option markup
  • Option headers
  • Mimics keyboard functionality where possible (sans multiselect)
  • Easy slot-in to your design system

Getting started

Install the dependency - https://www.npmjs.com/package/react-responsive-select

npm install react-responsive-select -save-dev

Example usage (Single Select):

import React from 'react';
import { Select, CaretIcon, ModalCloseButton } from 'react-responsive-select';

// for default styles...
import 'react-responsive-select/dist/react-responsive-select.css';

const Form = () => (
  <form>
    <Select
      name="carType1"
      modalCloseButton={<ModalCloseButton />}
      options={[
        { value: 'null', text: 'Any' },
        { value: 'alfa-romeo', text: 'Alfa Romeo' },
        { value: 'bmw', text: 'BMW' },
        { value: 'fiat', text: 'Fiat' },
        { value: 'subaru', text: 'Subaru' },
        { value: 'suzuki', text: 'Suzuki' },
        { value: 'tesla', text: 'Tesla' },
        { value: 'volvo', text: 'Volvo' },
        { value: 'zonda', text: 'Zonda' },
      ]}
      caretIcon={<CaretIcon />}
      prefix="Car1: "
      selectedValue="subaru"
      onChange={(newValue) => console.log('onChange', newValue)}
      onSubmit={() => console.log('onSubmit')}
    />
  </form>
);

Example usage (Multi Select):

import React from 'react';
import { Select, CaretIcon, MultiSelectOptionMarkup, ModalCloseButton } from 'react-responsive-select';

// for default styles...
import 'react-responsive-select/dist/react-responsive-select.css';

const Form = () => (
  <form>
    <Select
      multiselect={true}
      name="make6"
      selectedValues={['fiat']}
      modalCloseButton={<ModalCloseButton />}
      options={[
        {
          value: 'any',
          text: 'Any',
          markup: <MultiSelectOptionMarkup text="Any" />,
        },
        {
          value: 'fiat',
          text: 'Fiat',
          markup: <MultiSelectOptionMarkup text="Fiat" />,
        },
        {
          value: 'subaru',
          text: 'Subaru',
          markup: <MultiSelectOptionMarkup text="Subaru" />,
        },
        {
          value: 'suzuki',
          text: 'Suzuki',
          markup: <MultiSelectOptionMarkup text="Suzuki" />,
        },
      ]}
      caretIcon={<CaretIcon />}
      onChange={(...rest) => console.log(rest)}
      onSubmit={() => console.log('onSubmit')}
    />
  </form>
);

Examples & Demo

https://benbowes.github.io/react-responsive-select/

API

https://benbowes.github.io/react-responsive-select/#/API

Screen Reader Demo

https://benbowes.github.io/react-responsive-select/#/Screen%20reader%20demo

Business Rules

Have a read of [README_BUSINESS_RULES.md](./README_BUSINESS_RULES.md)