Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
October 16, 2021 04:57
April 30, 2022 13:24
April 30, 2022 13:24
April 28, 2021 23:24
April 16, 2021 22:57
April 9, 2021 15:55
April 14, 2021 14:01
April 30, 2022 13:24
April 28, 2021 23:24
April 28, 2021 23:24

React Column Select

NPM CI react-column-select DeepScan grade SIZE Depfu GitHub


πŸš€ Features

  • Easily customize colors
  • Responsive Design
  • Styled with emotion
  • Built with Typescript

⚑ Installation

yarn add react-column-select
# or
npm i react-column-select

🏁 Getting Started

import React, { useState } from 'react'
import ColumnSelect from 'react-column-select'

const hobbies = [
  { value: '1', label: 'Hockey' },
  { value: '2', label: 'Painting' },
  { value: '3', label: 'Singing' },

const HobbiesSelect = () => {
  const [selected, setSelected] = useState([])

  const onChange = (values) => {

  return (
      <h2>Select Your Hobbies</h2>
          leftHeader: 'Available Hobbies',
          rightHeader: 'Selected Hobbies',

βš™οΈ Props

name type isRequired default description
options array βœ” N/A available select options
onChange function βœ” N/A function called when selected values change
defaultValue array βœ– [] set the initial selected values
max number βœ– N/A set the max number of options that can be selected
labels object βœ– see below the labels for the headers, buttons & search input
theme object βœ– see below the color theme
isSearchable boolean βœ– false enables searching
disableAllButtons boolean βœ– false disable the "Add All" and "Remove All" buttons
disableDoubleClick boolean βœ– false disable double click to add/remove an option
disableKeyboard boolean βœ– false disable navigation the select options with keyboard

🎨 Theme Customization

Below is the default theme. Change the values that you want to customize:

    headerBgColor: '#d1d5db',
    columnBorderColor: '#9ca3af',
    textColor: '#000000',
    columnBgColor: '#CBD5E0',
    buttonBgColor: '#CBD5E0',
    optionSelectedBgColor: '#EDF2F7',
    optionHoverBgColor: '#FAFBFC',
    searchFocusBorderColor: '#06b6d4',

🏷️ Label Customization

Below are the default labels. Change the values that you want to customize:

    leftHeader: 'Options',
    rightHeader: 'Selected',
    searchPlaceholder: 'Search ...',
    add: 'Add',
    addAll: 'Add All',
    remove: 'Remove',
    removeAll: 'Remove All',


Distributed under the MIT license. See LICENSE for more information.