---
title: Create MultiSelect in React – Jaeves Codelab
description: Multi-Select is a component used to get multiple inputs from user. Here we will create multiselect in react applications. Create Checkbox in React First, W
---

[Skip to content](https://jaeves.com/codelab/create-multiselect-in-react#main-content)

 Close

SEARCH

[Discover Jaeves for Free](https://app.jaeves.com/login)

[![jaeves-2025-logo](https://jaeves.com/hubfs/logos/jaeves-2025-logo.svg)![jaeves-2025-logo](https://jaeves.com/hubfs/logos/jaeves-2025-logo.svg)](https://jaeves.com/)

[Discover Jaeves for Free](https://app.jaeves.com/login)

Quick results for "{search\_term}"

TABLE OF CONTENTS

loading...

[Admin](https://jaeves.com/codelab/author/admin)Oct 2, 2023, 5:57:48 PM3 min read

# Create MultiSelect in React

[Previous](https://jaeves.com/codelab/how-to-query-in-mongodb)

<https://jaeves.com/codelab>

[Next](https://jaeves.com/codelab/types-of-storage-for-react)

**Multi-Select is a component** used to get multiple inputs from user. Here we will create multiselect in react applications.

### Create Checkbox in React

First, We needs to install Selectly package. You can get details of the [selectly package here](https://www.npmjs.com/package/selectly).

```
npm install selectly --save
```

Now, we can create CheckboxOption which we will use in our multi-select dropdown in react components.

```
const { Component, Children, PropTypes } = React
const { Select, Option, utils } = Selectly
const { getToggledOptions } = utils

class CheckboxOption extends Component {
  render() {
    const { value, isChecked, children } = this.props
    return (
      <Option className="react-select-option" value={value}>
        <input
          type="checkbox"
          className="react-select-option__checkbox"
          defaultValue={null}
          checked={isChecked}
        />
        <div className="react-select-option__label">
          {children}
        </div>
      </Option>
    )
  }
}
```

### Creating MultiSelect Option in React

```
class CheckboxMultiSelect extends Component {
  constructor(props) {
    super(props)
    this.state = {
      defaultValue: 'Select a color',
      currentValues: []
    }
    this._handleChange = this._handleChange.bind(this)
  }

  _handleChange(value) {
    this.setState({
      currentValues: getToggledOptions(this.state.currentValues, value)
    })
  }

  render() {
    const { defaultValue, currentValues } = this.state

    return (
      <Select
        classPrefix="react-select"
        multiple
        onChange={this._handleChange}
      >
        <button className="react-select-trigger">
          { currentValues.length > 0
            ? currentValues.join(', ')
            : defaultValue
          }
        </button>
        <div className="react-select-menu">
          <ul className="react-select-options">
            <CheckboxOption value="php" isChecked={currentValues.indexOf('php') > -1}>
              PHP
            </CheckboxOption>
            <CheckboxOption value="react" isChecked={currentValues.indexOf('react') > -1}>
              React
            </CheckboxOption>
            <CheckboxOption value="wordpress" isChecked={currentValues.indexOf('wordpress') > -1}>
              WordPress
            </CheckboxOption>
          </ul>
        </div>
      </Select>
    )
  }
}
```

Now, we have react component **<CheckboxMultiSelect />** which we can use in our react class or functional component to create multiSelect in React.

### Styling MultiSelect Component in React

We can use this CSS to style our react multiselect component.

```
.react-select {
  display: inline-block;
  width: 100%;
  height: auto;
  position: relative;
}

.react-select-trigger {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 31px;
  padding: 6px 27px 6px 6px;
  font-size: 14px;
  text-align: left;
  border-radius: 3px;
  border: 1px solid #d3d4d4;
  outline: 0;
  cursor: pointer;
  position: relative;
  background: {
    color: #fff;
    image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21px" height="21px" viewBox="0 0 21 21"><polygon points="10.5,12 7,8.5 14,8.5"/></svg>');
    repeat: no-repeat;
    position: calc(100% - 5px) center;
  }

  &, &:active {
    color: black;
  }

  &.react-select-enabled {
  }

  &.react-select-target-attached-top {
    border-radius: 0 0 3px 3px;
  }

  &.react-select-target-attached-bottom {
    border-radius: 3px 3px 0 0;
  }

  // truncate children with ellipsis
  * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.react-select-trigger__option {
  user-select: none;

  & + & {
    margin-left: 6px;
  }

  .react-select-trigger--multiple & {
    padding: 0 3px;
    border-radius: 2px;
    background: #E6F9FF;
  }
}

.react-select-trigger__arrow {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.react-select-menu {
  max-height: 180px;
  padding: 3px 0;
  border: 1px solid #e1e1e1;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 4px 0 rgba(218, 221, 222, 0.35);
  background-color: white;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;

  .react-select-enabled & {
    pointer-events: auto;
  }

  .react-select-element-attached-top  & {
    margin-top: -1px;
    border-top: 0;
  }

  .react-select-element-attached-bottom  & {
    margin-top: 1px;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -2px 4px 0 rgba(218, 221, 222, 0.35);
  }
}

.react-select-header {
  display: flex;
  padding: 8px;
  border-bottom: 1px solid #F1F3F5;
  border-top: 1px solid #F1F3F5;
}

.react-select-btn {
  flex: 1;
}

.react-select-options {
  padding: 0;
  margin: 0;
  list-style: none;
}

.react-select-option {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 14px;
  text-indent: 4px;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;

  &:hover {
    background: #FBFBFB;
  }
}

.react-select-option__label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.react-select-optgroup {
  display: block;
  padding: 3px 0;
  cursor: default;
  border-top: 1px solid #F1F3F5;

  &:first-child {
    border: 0;
  }
}

.react-select-optgroup__title {
  display: block;
  padding: 8px 12px 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #909294;
  user-select: none;
}

// Pen Specific
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  padding: 24px;
}

#app {
  width: 300px;
  margin: 0 auto;
}
```

---

##### Recommendation

[Using MongoDB in Node.js](https://jaeves.com/codelab/how-to-use-mongodb-in-node-js/)

[Create Barcode in React](https://jaeves.com/codelab/how-to-create-barcode-in-react/)

[Create QR Code in React](https://jaeves.com/codelab/how-to-create-qr-code-in-react/)

[How to validate form in React](https://jaeves.com/codelab/how-to-validate-form-in-reactjs/)

[Using MongoDB with Laravel](https://jaeves.com/codelab/how-to-use-mongodb-in-laravel/)

[How to create charts in ReactJS](https://jaeves.com/codelab/how-to-create-charts-in-reactjs/)

[Basic Query In MongoDB](https://jaeves.com/codelab/how-to-query-in-mongodb/)

[Types of Storage For React](https://jaeves.com/codelab/types-of-storage-for-react/)

 

For more[ React Tutorials Click here](https://jaeves.com/codelab/tag/reactjs/), [Node.js Tutorials Click here](https://jaeves.com/codelab/tag/nodejs/).

 

COMMENTS

## RELATED ARTICLES

[![logo](https://jaeves.com/hs-fs/hubfs/jaeves-logo-230917.png?width=140&height=45&name=jaeves-logo-230917.png "logo")](https://jaeves.com/)

Jaeves is a trailblazing AI-powered content generation tool that revolutionizes your content creation journey. Its user-friendly interface, extensive customization options, and innovative approach make it an invaluable asset for all your content needs. Transform your content strategy with Jaeves today.

All rights reserved

- [Privacy Policy](https://jaeves.com/privacy-policy)

```json
{
  "@context" : "https://schema.org",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "Germany",
    "addressLocality" : "Speyer",
    "addressRegion" : "Rheinland-Pfalz",
    "postalCode" : "67346",
    "streetAddress" : "Gerhart-hauptmann-Str"
  },
  "knowsLanguage" : "en",
  "logo" : {
    "@type" : "ImageObject",
    "url" : "https://139767802.fs1.hubspotusercontent-eu1.net/hubfs/139767802/logo-2024-less-points.svg"
  },
  "name" : "Jaeves AI",
  "url" : "https://jaeves.com/codelab/create-multiselect-in-react"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "abstract" : "Multi-Select is a component used to get multiple inputs from user. Here we will create multiselect in react applications. Create Checkbox in React First, W",
  "author" : {
    "@type" : "Person",
    "name" : "Admin"
  },
  "dateModified" : "",
  "datePublished" : "",
  "headline" : "Create MultiSelect in React",
  "image" : "",
  "inLanguage" : "en",
  "keywords" : "[ReactJS]",
  "mainEntityOfPage" : {
    "@type" : "WebPage"
  },
  "name" : "Create MultiSelect in React",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://139767802.fs1.hubspotusercontent-eu1.net/hubfs/139767802/jaeves-logo-230917.png"
    },
    "name" : "Jaeves AI"
  },
  "text" : "Multi-Select is a component used to get multiple inputs from user. Here we will create multiselect in react applications. Create Checkbox in React First, We needs to install Selectly package. You can get details of the selectly package here. npm install selectly --save Now, we can create CheckboxOption which we will use in our multi-select dropdown in react components. const { Component, Children, PropTypes } = React const { Select, Option, utils } = Selectly const { getToggledOptions } = utils class CheckboxOption extends Component { render() { const { value, isChecked, children } = this.props return ( {children} ) } } Creating MultiSelect Option in React class CheckboxMultiSelect extends Component { constructor(props) { super(props) this.state = { defaultValue: 'Select a color', currentValues: [] } this._handleChange = this._handleChange.bind(this) } _handleChange(value) { this.setState({ currentValues: getToggledOptions(this.state.currentValues, value) }) } render() { const { defaultValue, currentValues } = this.state return ( { currentValues.length &gt; 0 ? currentValues.join(', ') : defaultValue } -1}&gt; PHP -1}&gt; React -1}&gt; WordPress ) } } Now, we have react component which we can use in our react class or functional component to create multiSelect in React. Styling MultiSelect Component in React We can use this CSS to style our react multiselect component. .react-select { display: inline-block; width: 100%; height: auto; position: relative; } .react-select-trigger { box-sizing: border-box; display: flex; width: 100%; height: 31px; padding: 6px 27px 6px 6px; font-size: 14px; text-align: left; border-radius: 3px; border: 1px solid #d3d4d4; outline: 0; cursor: pointer; position: relative; background: { color: #fff; image: url('data:image/svg+xml;utf8,'); repeat: no-repeat; position: calc(100% - 5px) center; } &amp;, &amp;:active { color: black; } &amp;.react-select-enabled { } &amp;.react-select-target-attached-top { border-radius: 0 0 3px 3px; } &amp;.react-select-target-attached-bottom { border-radius: 3px 3px 0 0; } // truncate children with ellipsis * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .react-select-trigger__option { user-select: none; &amp; + &amp; { margin-left: 6px; } .react-select-trigger--multiple &amp; { padding: 0 3px; border-radius: 2px; background: #E6F9FF; } } .react-select-trigger__arrow { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } .react-select-menu { max-height: 180px; padding: 3px 0; border: 1px solid #e1e1e1; border-radius: 0 0 3px 3px; box-shadow: 0 2px 4px 0 rgba(218, 221, 222, 0.35); background-color: white; overflow-x: hidden; overflow-y: auto; pointer-events: none; -webkit-tap-highlight-color: transparent; .react-select-enabled &amp; { pointer-events: auto; } .react-select-element-attached-top &amp; { margin-top: -1px; border-top: 0; } .react-select-element-attached-bottom &amp; { margin-top: 1px; border-bottom: 0; border-radius: 3px 3px 0 0; box-shadow: 0 -2px 4px 0 rgba(218, 221, 222, 0.35); } } .react-select-header { display: flex; padding: 8px; border-bottom: 1px solid #F1F3F5; border-top: 1px solid #F1F3F5; } .react-select-btn { flex: 1; } .react-select-options { padding: 0; margin: 0; list-style: none; } .react-select-option { display: flex; align-items: center; padding: 4px 8px; font-size: 14px; text-indent: 4px; border-radius: 2px; cursor: pointer; user-select: none; &amp;:hover { background: #FBFBFB; } } .react-select-option__label { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .react-select-optgroup { display: block; padding: 3px 0; cursor: default; border-top: 1px solid #F1F3F5; &amp;:first-child { border: 0; } } .react-select-optgroup__title { display: block; padding: 8px 12px 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #909294; user-select: none; } // Pen Specific * { box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { padding: 24px; } #app { width: 300px; margin: 0 auto; } Recommendation Using MongoDB in Node.js Create Barcode in React Create QR Code in React How to validate form in React Using MongoDB with Laravel How to create charts in ReactJS Basic Query In MongoDB Types of Storage For React For more React Tutorials Click here, Node.js Tutorials Click here.",
  "url" : "https://jaeves.com/codelab/create-multiselect-in-react",
  "wordCount" : "1079"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Admin",
    "url" : "https://jaeves.com/codelab/author/admin"
  },
  "dateModified" : "2023-10-02T21:58:44.860Z",
  "datePublished" : "2023-10-02T21:57:48.000Z",
  "headline" : "Create MultiSelect in React – Jaeves Codelab",
  "mainEntityOfPage" : {
    "@id" : "https://jaeves.com/codelab/create-multiselect-in-react",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://jaeves.com/hubfs/logo-2024-less-points.svg"
    },
    "name" : "Jaeves AI"
  }
}
```

```json
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "description" : "Unlock the Power of AI for Content Creation. Explore Insights, Tips, and Trends on the Jaeves.com Blog. Empower Your Writing Journey Today!",
  "logo" : "https://jaeves.com/hubfs/untitled%20(4).png",
  "name" : "Jaeves AI",
  "sameAs" : [ "https://www.instagram.com/jaeves.ai", "https://www.linkedin.com/company/jaeves-ai", "https://www.youtube.com/@Jaeves_ai", "https://www.tiktok.com/@jaeves_ai" ],
  "url" : "https://jaeves.com"
}
```