Popularity

2.2

Stable

Activity

5.9

Stars 109

Watchers 2

Forks 16

Last Commit 3 months ago

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.

react-select

9.8 6.0 React Responsive Select VS react-select

The Select Component for React.js
rc-select

6.6 8.0 React Responsive Select VS rc-select

React Select

SurveyJS - JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor

Keep full control over the data you collect and tailor the form builder’s entire look and feel to your users’ needs. SurveyJS works with React, Angular, Vue 3, and is compatible with any backend or auth system. Learn more.

Promo surveyjs.io

React Virtualized Select

6.2 0.0 React Responsive Select VS React Virtualized Select

HOC that uses react-virtualized and react-select to display large lists of options in a drop-down
react-selectize

5.5 0.0 React Responsive Select VS react-selectize

A Stateless & Flexible Select component for React inspired by Selectize.
React-Select-Plus

5.3 0.0 React Responsive Select VS React-Select-Plus

Fork of https://github.com/JedWatson/react-select with option group support
react-aria-menubutton

4.4 1.8 React Responsive Select VS react-aria-menubutton

A fully accessible, easily themeable, React-powered menu button
react-select-box

3.7 0.0 React Responsive Select VS react-select-box

An accessible select box component for React.
react-selectrix

2.7 0.0 React Responsive Select VS react-selectrix

A beautiful, materialized and flexible React Select control
react-styled-select

2.3 0.0 React Responsive Select VS react-styled-select

A Select control built with Reactjs, styled-components and :heart: http://agutoli.github.io/
react-combo-select

1.5 0.0 React Responsive Select VS react-combo-select

React dropdown for select and multiselect
mytabworks-react-select

0.4 0.0 React Responsive Select VS mytabworks-react-select

easy like breezy

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

Add another 'Select' Library

Popular Comparisons

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
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>
);