React Select

React Select is a flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.

Basic example

The jQuery replacement for select boxes. React Select gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Preview

Jsx

import React, { useState } from 'react';
import { Form } from 'react-bootstrap';
import Select from 'react-select';
import { colourOptions } from '../../Components/DataEntry/ReactSelect/data';

const ReactSelectExample = () => {
    const [isClearable, setIsClearable] = useState(true);
    const [isSearchable, setIsSearchable] = useState(true);
    const [isDisabled, setIsDisabled] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [isRtl, setIsRtl] = useState(false);

  return (
    <>
        <Select
            className="basic-single"
            classNamePrefix="select"
            defaultValue={colourOptions[0]}
            isDisabled={isDisabled}
            isLoading={isLoading}
            isClearable={isClearable}
            isRtl={isRtl}
            isSearchable={isSearchable}
            name="color"
            options={colourOptions}
        />
        <div className="mt-2">
            <Form.Check
                inline
                type="checkbox"
                id="clearable"
                label="clearable"
                checked={isClearable}
                onChange={() => setIsClearable(!isClearable)}
            />
            <Form.Check
                inline
                type="checkbox"
                id="searchable"
                label="searchable"
                checked={isSearchable}
                onChange={() => setIsSearchable(!isSearchable)}
            />
            <Form.Check
                inline
                type="checkbox"
                id="disabled"
                label="disabled"
                checked={isDisabled}
                onChange={() => setIsDisabled(!isDisabled)}
            />
            <Form.Check
                inline
                type="checkbox"
                id="isloading"
                label="isloading"
                checked={isLoading}
                onChange={() => setIsLoading(!isLoading)}
            />
            <Form.Check
                inline
                type="checkbox"
                id="rtl"
                label="rtl"
                checked={isRtl}
                onChange={() => setIsRtl(!isRtl)}
            />
        </div>
    </>
  );
};

export default ReactSelectExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Multiple Select

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below.

Preview

Jsx

Purple

Red

import React from 'react';
import Select from 'react-select';
import { colourOptions } from '../../Components/DataEntry/ReactSelect/data';

const MultiSelectExample = () => {

  return (
    <Select
        defaultValue={[colourOptions[2], colourOptions[3]]}
        isMulti
        name="colors"
        options={colourOptions}
        className="basic-multi-select"
        classNamePrefix="select"
    />
  );
};

export default MultiSelectExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Creatable Multiselect

Try entering a value that isn't listed in the dropdown - you'll be able to add it as a new option!

Preview

Jsx

Select...

import React from 'react';
import CreatableSelect from 'react-select/creatable';
import { colourOptions } from '../../Components/DataEntry/ReactSelect/data';

const CreatableMultiSelect = () => {
  return <CreatableSelect isMulti options={colourOptions} />;
};

export default CreatableMultiSelect;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Animated Components

React-Select comes with a makeAnimated function that create animated wrappers around components passed in as arguments. If no arguments are passed, built-in components are wrapped instead. Remove the values below to see them in action.

Preview

Jsx

Orange

Yellow

import React from 'react';
import Select from 'react-select';
import makeAnimated from 'react-select/animated';
import { colourOptions } from '../../Components/DataEntry/ReactSelect/data';

const AnimatedSelectExample = () => {
    const animatedComponents = makeAnimated();
  return (
    <Select
        closeMenuOnSelect={false}
        components={animatedComponents}
        defaultValue={[colourOptions[4], colourOptions[5]]}
        isMulti
        options={colourOptions}
    />
  );
};

export default AnimatedSelectExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic example
Multiple select
Creatable Multiselect
Animated Components