MultiSelect

MultiSelect component is used to select one or multiple option from given options.

Import#

import { MultiSelect } from '@incmix/ui'

Usage#

Single Mode#

Choose an item

import { useState } from 'react'

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

  const options = [
    {
      label: 'Tesla',
      value: 'Tesla',
    },
    {
      label: 'Volvo',
      value: 'Volvo',
    },
  ]

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

Multi Mode#

Choose an item

import { useState } from 'react'

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

  const options = [
    {
      label: 'Tesla',
      value: 'Tesla',
    },
    {
      label: 'Volvo',
      value: 'Volvo',
    },
  ]

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

Create + Single Mode#

Choose or create an item

import { useState } from "react"
import { useMultiSelect } from "@incmix/ui

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

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

Multi + Create Mode#

Choose or create an item

import { useState } from "react"
import { useMultiSelect } from "@incmix/ui

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

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

Edit this page on GitHub