export const title = "Multi-select components"
export const description = "Free and open-source React multi select components built for modern applications and websites. These multi select components are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/select",
    rac: "https://react-spectrum.adobe.com/react-aria/Select.html"
}

import * as Demos from "@/components/base/select/select.demo.tsx";

<PreviewAndCode title="Multi-select example">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.MultiSelectMdDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="select/MultiSelectMdDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this multi-select component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add select
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/select" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the multi-select components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Multi-select examples

Below are examples and variations of this multi-select component:

### Default {{ tocOnly:true }}

<PreviewAndCode title="Default">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.MultiSelectMdDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="select/MultiSelectMdDemo" />
    </TabPanel>
</PreviewAndCode>

### With leading icon {{ tocOnly:true }}

<PreviewAndCode title="With leading icon">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.MultiSelectWithIconDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="select/MultiSelectWithIconDemo" />
    </TabPanel>
</PreviewAndCode>

### Disabled {{ tocOnly:true }}

<PreviewAndCode title="Disabled">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.MultiSelectDisabledDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="select/MultiSelectDisabledDemo" />
    </TabPanel>
</PreviewAndCode>

### Sizes {{ tocOnly:true }}

<PreviewAndCode title="Sizes">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.MultiSelectSizesDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="select/MultiSelectSizesDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "What sizes are available for the multi-select?",
            answer: "The multi-select supports three sizes: `\"sm\"`, `\"md\"`, and `\"lg\"`. The default size is `\"md\"`.",
        },
        {
            question: "How do I disable the multi-select?",
            answer: "You can disable the multi-select by setting the `isDisabled` prop to `true`.",
        },
        {
            question: "How do I add a select all option?",
            answer: "Pass an `onSelectAll` callback to add a \"Select all\" action, and an `onReset` callback to add a \"Reset\" action. These appear as buttons in the dropdown footer. To hide the footer entirely, set `showFooter={false}`.",
        },
        {
            question: "How do I display supporting text next to the selected count?",
            answer: "Use the `supportingText` prop to show additional context next to the selected items count, such as `\"12 users\"`.",
        },
        {
            question: "How do I hide the search input?",
            answer: "Set `showSearch={false}` to remove the search input from the popover. Use `emptyStateTitle` and `emptyStateDescription` to customize the empty state shown when the listbox has no items (no search results, or an empty `items` array).",
        },
        {
            question: "How do I customize the selected count text?",
            answer: "Pass a `selectedCountFormatter` function — it receives the selected count and returns a `ReactNode`. Useful for pluralization or showing the selected items inline instead of just a number.",
        },
        {
            question: "How do I control the selection?",
            answer: "Pass `selectedKeys` and `onSelectionChange` for controlled state, or `defaultSelectedKeys` for uncontrolled. The selection value is a React Aria `Selection` — either a `Set` of item ids or the literal string `\"all\"`.",
        },
        {
            question: "Is the multi-select accessible?",
            answer: "Yes. The multi-select is built on React Aria Components, which provides full keyboard navigation, screen reader support, and ARIA attributes out of the box.",
        },
    ]}
/>