Programming language: TypeScript
License: MIT License
Tags: UI Components     Select     Form Components    

react-column-select alternatives and similar libraries

Based on the "Select" category.
Alternatively, view react-column-select alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-column-select or a related project?

Add another 'Select' Library


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 HobbiesSelect = () => {
  const [selected, setSelected] = useState([])

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

  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
leftHeader string 'Options' the left column header
rightHeader string 'Selected' the right column headers
isSearchable boolean false enables searching
searchPlaceholder string 'Search ...' the placeholder string for the search inputs
theme object {} the color theme
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: '#d6b1ff',
    columnBorderColor: '#cfa4ff',
    textColor: '#000000',
    columnBgColor: '#CBD5E0',
    buttonBgColor: '#CBD5E0',
    searchFocusBorderColor: '#805Ad5'


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

*Note that all licence references and agreements mentioned in the react-column-select README section above are relevant to that project's source code only.