Multiple Selector with Textarea

About Multiple Selector

A textarea-based version of the Multiple Selector component, allowing for multi-line text input while maintaining all the functionality of the original selector. Inspired by Multiple Selector from shadcn-ui expansions.

Basic Demo

With Custom Badges

You can customize the badges using the ImageBadge component:

Next.js

React

Features

• Multi-line text input with auto-resizing textarea
• Async search with debounce support
• Create custom options when no matches found
• Group options by any field
• Maximum selection limit with callback
• Customizable loading and empty states
• Fixed options that cannot be removed
• Full keyboard navigation support

Code Examples

import { MultipleTextAreaSelector } from '@/components/ui'

const OPTIONS = [
  { label: 'Next.js', value: 'nextjs' },
  { label: 'React', value: 'react' },
]

export default function Demo() {
  return (
    <MultipleTextAreaSelector
      defaultOptions={OPTIONS}
      placeholder="Select frameworks..."
      minHeight={52}
      maxHeight={200}
    />
  )
}

<MultipleTextAreaSelector
  onSearch={async (query) => {
    const response = await fetch(`/api/search?q=${query}`)
    return response.json()
  }}
  delay={300}
  loadingIndicator={<Spinner />}
/>