Description
A customisable, touchable, React single-select / multi-select form control.
Built with keyboard and screen reader accessibility in mind.
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.
-
React Virtualized Select
HOC that uses react-virtualized and react-select to display large lists of options in a drop-down -
react-selectize
A Stateless & Flexible Select component for React inspired by Selectize. -
React-Select-Plus
Fork of https://github.com/JedWatson/react-select with option group support -
react-aria-menubutton
A fully accessible, easily themeable, React-powered menu button -
react-select-box
An accessible select box component for React. -
react-selectrix
A beautiful, materialized and flexible React Select control -
react-styled-select
A Select control built with Reactjs, styled-components and :heart: http://agutoli.github.io/ -
react-combo-select
React dropdown for select and multiselect
Appwrite - The Open Source Firebase alternative introduces iOS support
Do you think we are missing an alternative of React Responsive Select or a related project?
README
react-responsive-select
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
- It's about 25kb
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)
Upgrade from v6 - v7
From version 7.0.0 on, you will need to use a key
prop to update react-responsive-select's internal state. More on that here: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
There are some examples in the recipe section here: https://benbowes.github.io/react-responsive-select/