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.

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

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

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.

Bumping this feature request.

Would be great to have it.

+1

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.

+1

Please make this :)

+1 definitely looking forward to this

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.

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!

+1 - agree! Would love this

+1

+1 agree

+1 do it

+1

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!

+1

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>
  );
}

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

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

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/

@sersavan awesome, make it into a PR

@sersavan It looks amazing. looking forward

just FYI, you can implement multiselect with the dropdown component and checkbox items
it is a strange way to do it, but should be pretty easy to implement

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/

@sersavan can you move CommandInput search option within PopoverTrigger?

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/

@sersavan can you move CommandInput search option within PopoverTrigger?

@zahidiqbalnbs
but why?

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/

@sersavan can you move CommandInput search option within PopoverTrigger?

@zahidiqbalnbs but why?

@sersavan thanks for your reply! You are a code guru and doing great stuff. The only reason for asking is if you look at react-select, antd multiselect, mui multiselect and others, all have search functionality within Input instead of providing them in Popover content. Thats why I am looking for if you can do that, would be really great!! Thanks again for all the wonderful work.

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/

@sersavan can you move CommandInput search option within PopoverTrigger?

@zahidiqbalnbs but why?

@sersavan thanks for your reply! You are a code guru and doing great stuff. The only reason for asking is if you look at react-select, antd multiselect, mui multiselect and others, all have search functionality within Input instead of providing them in Popover content. Thats why I am looking for if you can do that, would be really great!! Thanks again for all the wonderful work.

@zahidiqbalnbs
I appreciate your feedback. If we add a search function to the popover, we need to decide which list to search through. In my component, the list is shown as a table. It would be more convenient to have the search bar in the same place as the table, rather than in the popover. Or propose your solution instead.

+1 🚀

Would be awesome to have multiselect! +1

Contrary to what @sersavan has made, and what some others want, I would much prefer this be as a multiple argument to the existing Select primitive (as the OP suggests). This is due to accessibility concerns and also DX.

<select> in HTML already supports choosing multiple selections, albeit in a weird way (it doesn't render as a normal dropdown anymore, but a scrollable block, which looks awful) I would prefer having a checkbox like select but still using <select> under-the-hood, and not creating a MultiSelect that many other libraries provide.

Another concern is that if you don't use the html <select> element, I cannot possibly use it in a form without a controlled input; this is horrible for server components that cannot have a stateful controlled element without making the entire form client-side.

Thanks.

Note that the DX question of "is this an argument to Select or a separate component" and the accessibility question of "does this render to <select multiple />" are orthogonal. Two separate components can both render to HTML <select> with different parameters and styling.

realy need this multiselect please

+1

+1

I'm interested in helping with this if you're open to contributions? 😄

+1

+1

I've done some work to the select component to support multi select in this PR. Not sure on the process to get it reviewed, but would be great to get some community feedback too.

#3522

are there any updates?