X Tutup
Skip to content

feat: Add single selection mode with search functionalityΒ #85

@pkuliga

Description

@pkuliga

πŸš€ Feature Request: Single Selection Mode

Problem

The current MultiSelect component is designed exclusively for multi-selection. However, there are use cases where a searchable single-select is needed β€” something a basic <select> or shadcn Select component doesn't provide out of the box.

Proposed Solution

Add a singleSelect (or mode: "single" | "multi") prop that:

  • Limits selection to one item at a time
  • Keeps the search/filter functionality intact
  • Automatically closes the popover after selection (like closeOnSelect)
  • Clears the previous selection when a new item is picked
  • Still supports all existing props: searchable, placeholder, disabled, emptyIndicator, etc.

Example Usage

<MultiSelect
  options={options}
  onValueChange={setSelected}
  singleSelect={true}
  placeholder="Search and select one..."
/>

Why Not Use shadcn Select?

The native shadcn Select component lacks built-in search/filter functionality, making it impractical for large option lists. This component already has the search infrastructure β€” a singleSelect mode would reuse it elegantly.

Acceptance Criteria

  • New singleSelect?: boolean prop (default: false)
  • Selecting an item replaces the previous selection
  • Popover closes automatically on selection when singleSelect={true}
  • onValueChange still returns string[] for API compatibility (with a single element)
  • Existing multi-select behaviour is unaffected

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      X Tutup