# chakra-multiselect

> A Multiselect component using ChakraUI

Latest version **0.4.13** (published 2024-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install chakra-multiselect
pnpm add chakra-multiselect
yarn add chakra-multiselect
bun add chakra-multiselect
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.13 |
| Published | 2024-01-22 |
| First published | 2021-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 0 |
| Unpacked size | 730.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51 |
| Author | bmartel |
| Maintainers | bmartel |

## Links

- npm: https://www.npmjs.com/package/chakra-multiselect
- Repository: https://github.com/bmartel/chakra-multiselect
- Homepage: http://bmartel.github.io/chakra-multiselect
- Issues: https://github.com/bmartel/chakra-multiselect/issues
- npm.io page: https://npm.io/package/chakra-multiselect

## Recent versions

- 0.4.13 (latest) — 2024-01-22
- 0.4.12 — 2024-01-21
- 0.4.11 — 2024-01-20
- 0.4.10 — 2024-01-20
- 0.4.9 — 2024-01-20
- 0.4.8 — 2024-01-20
- 0.4.7 — 2024-01-20
- 0.4.6 — 2023-08-18
- 0.4.5 — 2023-06-16
- 0.4.4 — 2023-06-16
- 0.4.3 — 2023-06-16
- 0.4.2 — 2023-06-15
- 0.4.1 — 2023-03-26
- 0.4.0 — 2023-03-25
- 0.3.12 — 2023-03-19
- … 34 more at https://npm.io/package/chakra-multiselect/versions

## README

# chakra-multiselect

> A Multiselect component using ChakraUI

[![NPM](https://img.shields.io/npm/v/chakra-multiselect.svg)](https://www.npmjs.com/package/chakra-multiselect)
[![Package Size](https://badgen.net/bundlephobia/min/chakra-multiselect)](https://badgen.net/bundlephobia/min/chakra-multiselect)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-prettier-hotpink.svg)](https://prettier.io)
![Tests](https://github.com/bmartel/chakra-multiselect/actions/workflows/test.yml/badge.svg)
![Docs](https://github.com/bmartel/chakra-multiselect/actions/workflows/deploy_docs.yml/badge.svg)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/bmartel/chakra-multiselect)

## Install [ChakraUI](https://chakra-ui.com/getting-started)

```bash
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

```bash
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.

``` tsx
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

```tsx
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

```tsx
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

```tsx
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

```tsx
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](https://github.com/bmartel)

---
_Source: https://npm.io/package/chakra-multiselect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._