Combobox

A select or multiselect input component.

Source

Installation

npx @rahimstack@latest add combobox

Usage

Unlike Autocomplete, Combobox does not allow arbitrary values. However, it allows multiple selections and custom labels.

ComboboxOption

A ComboboxOption takes a string value, a label and an optional textValue.

  • The value prop is used to identify the option just like the value prop of a native option element.
  • The label prop is used to display the option in the dropdown list.
  • The textValue prop is used for searching and filtering the options. If not provided, the value prop will be used instead.
  • The textValue prop is also used instead of the label prop when multiple options can be selected.

Multiple

<Combobox
    {...props}
    multiple
/>

Uncontrolled

  • Input type: text, Ref prop: inputRef
  • A stringified array of selected values will be submitted.
  • If not required, a stringified empty array will be submitted if no option is selected.

API Reference

const ComboboxAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Combobox__root",
        "justify-between h-auto",
    ], {
        variants: {
            size: {
                sm: "min-h-8 px-2 py-1 text-sm",
                md: "min-h-10 px-3 py-2 ",
                lg: "min-h-12 px-4 py-3 text-md",
            },
        },
        defaultVariants: {
            size: "md",
        }
    }),
    popover: cva([
        "UI-Combobox__popover",
        "w-[--radix-popover-trigger-width] p-0",
    ]),
    checkIcon: cva([
        "UI-Combobox__checkIcon",
        "h-4 w-4",
        "data-[selected=true]:opacity-100 data-[selected=false]:opacity-0",
    ]),
    item: cva([
        "UI-Combobox__item",
        "flex gap-1 items-center bg-gray-100 dark:bg-gray-800 px-2 pr-1 rounded-[--radius] max-w-96",
    ]),
    placeholder: cva([
        "UI-Combobox__placeholder",
        "text-[--muted] truncate",
    ]),
    inputValuesContainer: cva([
        "UI-Combobox__inputValuesContainer",
        "grow flex overflow-hidden gap-2",
    ]),
    chevronIcon: cva([
        "UI-Combobox__chevronIcon",
        "ml-2 h-4 w-4 shrink-0 opacity-50",
    ]),
    removeItemButton: cva([
        "UI-Badge__removeItemButton",
        "text-lg cursor-pointer transition ease-in hover:opacity-60",
    ]),
})