chakra-multiselect

chakra-multiselect

A Multiselect component using ChakraUI

Install ChakraUI

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
or
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Install ChakraMultiselect

npm i chakra-multiselect
or
yarn add chakra-multiselect

Usage

Ensure your application has a ChakraProvider wrapping your Application's main component (ex. <App />).

Include the MultiSelectTheme as a component in the theme declarations.

See https://bmartel.github.io/chakra-multiselect/docs for full documentation.

import { ChakraProvider, extendTheme } from '@chakra-ui/react'
import {  MultiSelectTheme } from 'chakra-multiselect'

const theme = extendTheme({
  components: {
    MultiSelect: MultiSelectTheme
  }
})

const App = () => (
  <ChakraProvider theme={theme}>
    {/* ... */}
  </ChakraProvider>
)

Single Mode

import { MultiSelect } from 'chakra-multiselect'

const Component = () => {
  const [value, setValue] = useState('')

  return (
    <MultiSelect
      options={options}
      value={value}
      label='Choose an item'
      onChange={setValue}
      single
    />
  )
}

Multi Mode

import { MultiSelect } from 'chakra-multiselect'

const Component = () => {
  const [value, setValue] = useState([])

  return (
    <MultiSelect
      options={options}
      value={value}
      label='Choose an item'
      onChange={setValue}
    />
  )
}

Single + Create Mode

import { MultiSelect, useMultiSelect } from 'chakra-multiselect'

const Component = () => {
  const { value, options, onChange } = useMultiSelect({
    value: '',
    options: []
  })

  return (
    <MultiSelect
      options={options}
      value={value}
      label='Choose or create an item'
      onChange={onChange}
      create
      single
    />
  )
}

Multi + Create Mode

import { MultiSelect, useMultiSelect } from 'chakra-multiselect'

const Component = () => {
  const { value, options, onChange } = useMultiSelect({
    value: [],
    options: []
  })

  return (
    <MultiSelect
      options={options}
      value={value}
      label='Choose or create items'
      onChange={onChange}
      create
    />
  )
}

License

MIT © bmartel