[Select] Support multiple selections

[benoitgrelard]

Hi @aungbobotun , I suppose this is a feature request? If so, it is on our broad roadmap, but hasn't been planned or prioritised yet.

[pavel-mazhuga]

+1, would be nice to have a multiple select primitive. Great lib btw

[cserb]

Is there someone who managed to modify the select primitive and make it multi select?

[grumd]

Is there someone who managed to modify the select primitive and make it multi select?

Doubt that. I looked at radix source code, the Root primitive and the SelectItem primitive talk to each other through context, and what it uses is a const [selectedItem, setSelectedItem] = React.useState<SelectItemElement | null>(null); piece of state.

You'll have to rewrite more than half of the Select primitive for it to work with multiple selected items, it would still break a lot of functionality like keyboard controls, and a lot of built-in accessibility is also lost, so it's probably easier to just use something like react-select until radix adds a new MultiSelect primitive. You can't really adapt the existing primitive without writing a multiselect from scratch.

[wongmrdev]

Bumping this feature request.

[BleedingDev]

Would be great to have it.

[dpromisel]

+1

[Alarid]

+1

[sinbad-io]

+1

[Johnrobmiller]

Having a multi-select would better position Radix against HeadlessUI, which does have a multi-select. I don't mind installing both libraries, and I could never only use HeadlessUI since Radix has so much that HeadlessUI does not.

[timnlupo]

+1

[Melvynx]

+1

[Andree37]

+1

[ghost]

+1

[boazhoch]

+1

[austinm911]

+1

[Nhollas]

Please make this :)

[bekyarov]

+1 definitely looking forward to this

[hegelstad]

Having a multiple select primitive would be immensely valuable! I want to use it to improve UX for my users who have to hide one table column at a time.

[josepdecid]

This missing feature is one of the few things that still "forces" me to use Headless UI. It'd be super cool to see this soon!

[MathiasHoeyrup]

+1 - agree! Would love this

[axelmylle]

+1

[nguyenkhang2801]

+1 agree

[tonnoz]

+1 do it

[damyco]

+1

[daskimmel]

+1

[kuus]

it is really spammy this all +1, many notifications for nothing, can't you use the thumb up on the first issue's comment thanks!

[admhemed]

+1

[0xboga]

+1

[AbrialStha]

+1

[Kush-Wednesday]

+1

[abbasKareem]

+1

[jaehc90]

+1

[tomekregulski]

Apologies if there is a better way to request, but I hope that there can also be consideration to add searchable versions of both the single and (hopefully upcoming) multiple selects.

[Powerplex]

Unfortunately we have to build a custom component because multiple is very important for our design system. Any update ?

[taochu]

[vincerubinetti]

Having a multi-select would better position Radix against HeadlessUI, which does have a multi-select. I don't mind installing both libraries, and I could never only use HeadlessUI since Radix has so much that HeadlessUI does not.

I kind of do mind installing both, a little bit. Because then I have to installed HeadlessUI, and FloatingUI to be able to position the dropdown, which duplicates the positioning logic of Radix. Not the end of the world, but kind of silly to have two sets of positioning code bundled with the app just because libraries have pretty big gaps in commonly-needed functionality.

[abhishek61067]

Would be great if we could have it.

[spartan-huyle]

+1 🚀

[tincho]

Why is this closed as completed ?

It's not clear , do we or do we not have a Radix-UI way to multiselect ? Thanks !!

[vincerubinetti]

I think this was closed as a duplicate of this issue, which is still open and being worked on:

https://github.com/radix-ui/primitives/issues/1342

No, there is currently not a combobox in Radix.

[szamanr]

how does a combobox solve the need for a multi-select? it's a completely different primitive. @benoitgrelard please reopen this issue.

[vvalikpavlenko]

+1 🚀

[Amirhesamn]

+1

[anolan23]

Here's a workaround for selecting multiple items which uses DropdownMenu. Can be controlled or uncontrolled. I'm using shadcn for styling in this case.

import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { CaretSortIcon } from '@radix-ui/react-icons';
import { useMemo, useState } from 'react';

type FilterItemDefinition = {
  value: string;
  label: string;
};
interface FilterProps {
  items: FilterItemDefinition[];
  value?: string[];
  onValueChange?: (value: string[]) => void;
}
export function Filter({ items, value, onValueChange }: FilterProps) {
  const [internalValue, setInternalValue] = useState<string[]>([]);

  const handleItemClick = function (item: FilterItemDefinition) {
    const newValue = selectedValues.includes(item.value)
      ? selectedValues.filter((value) => value !== item.value)
      : [...selectedValues, item.value];
    if (onValueChange) {
      onValueChange(newValue);
    } else {
      setInternalValue(newValue);
    }
  };

  const selectedValues = useMemo(() => {
    return value !== undefined ? value : internalValue;
  }, [value, internalValue]);

  return (
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="justify-between">
          Filter data
          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]">
        {items.map((item) => {
          return (
            <DropdownMenuCheckboxItem
              key={item.value}
              checked={selectedValues.includes(item.value)}
              onCheckedChange={() => handleItemClick(item)}
              onSelect={(e) => e.preventDefault()}
            >
              {item.label}
            </DropdownMenuCheckboxItem>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

[benoitgrelard]

@anolan23, this is the wrong component to use unfortunately, accessibility and semantic is completely different, won't work in forms, etc.

[anolan23]

@benoitgrelard, Guess I would have to call it a DropdownMenu with multi checkbox options. Not a Select with multiple.

[sersavan]

I've assembled a multi-select component using the native shadcn's components. It's fully in line with design and integrates seamlessly into shadcn's ecosystem. Please, try it out and share your thoughts. https://shadcn-multi-select-component.vercel.app/

[tonnoz]

@sersavan awesome, make it into a PR

[Roeefl]

@sersavan It looks amazing. looking forward