Combobox

'use client';

import * as Combobox from '@components/caprice-ui/combobox';

export default function ComboboxDemo() {
  return (
    <Combobox.Root>
      <Combobox.Input />
    </Combobox.Root>
  );
}

Installation

npx shadcn@latest add @caprice/combobox

npx shadcn@latest add @caprice/combobox

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add a cn helper

import { defineConfig, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const {
  compose,
  cva,
  cx: cn,
} = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

Copy and paste the following code into your project.

'use client';

import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
import type * as React from 'react';

/**
 * Groups all parts of the combobox.
 * Doesn't render its own HTML element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#root)
 */
export namespace Root {
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Root>;
  export type State = ComboboxPrimitive.Root.State;
  export type Actions = ComboboxPrimitive.Root.Actions;
  export type ChangeEventDetails = ComboboxPrimitive.Root.ChangeEventDetails;
  export type ChangeEventReason = ComboboxPrimitive.Root.ChangeEventReason;
  export type HighlightEventDetails = ComboboxPrimitive.Root.HighlightEventDetails;
  export type HighlightEventReason = ComboboxPrimitive.Root.HighlightEventReason;
}

export function Root({ ...props }: Root.Props) {
  return <ComboboxPrimitive.Root data-slot="combobox" {...props} />;
}

/**
 * The current value of the combobox.
 * Doesn't render its own HTML element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#value)
 */
export namespace Value {
  export type State = ComboboxPrimitive.Value.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Value>;
}

export function Value({ ...props }: Value.Props) {
  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
}

/**
 * An icon that indicates that the trigger button opens the popup.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#icon)
 */
export namespace Icon {
  export type State = ComboboxPrimitive.Icon.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Icon>;
}

export function Icon({ ...props }: Icon.Props) {
  return <ComboboxPrimitive.Icon data-slot="combobox-icon" {...props} />;
}

/**
 * A text input to search for items in the list.
 * Renders an `<input>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#input)
 */
export namespace Input {
  export type State = ComboboxPrimitive.Input.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Input>;
}

export function Input({ ...props }: Input.Props) {
  return <ComboboxPrimitive.Input data-slot="combobox-input" {...props} />;
}

/**
 * Clears the value when clicked.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#clear)
 */
export namespace Clear {
  export type State = ComboboxPrimitive.Clear.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Clear>;
}

export function Clear({ ...props }: Clear.Props) {
  return <ComboboxPrimitive.Clear data-slot="combobox-clear" {...props} />;
}

/**
 * A button that opens the popup.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#trigger)
 */
export namespace Trigger {
  export type State = ComboboxPrimitive.Trigger.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Trigger>;
}

export function Trigger({ ...props }: Trigger.Props) {
  return <ComboboxPrimitive.Trigger data-slot="combobox-trigger" {...props} />;
}

/**
 * A container for the chips in a multiselectable input.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chips)
 */
export namespace Chips {
  export type State = ComboboxPrimitive.Chips.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Chips>;
}

export function Chips({ ...props }: Chips.Props) {
  return <ComboboxPrimitive.Chips data-slot="combobox-chips" {...props} />;
}

/**
 * A component that renders a chip of the combobox.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip)
 */
export namespace Chip {
  export type State = ComboboxPrimitive.Chip.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Chip>;
}

/**
 * An individual chip that represents a value in a multiselectable input.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip-remove)
 */
export function Chip({ ...props }: Chip.Props) {
  return <ComboboxPrimitive.Chip data-slot="combobox-chip" {...props} />;
}

/**
 * A button to remove a chip.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#list)
 */
export namespace ChipRemove {
  export type State = ComboboxPrimitive.ChipRemove.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.ChipRemove>;
}

export function ChipRemove({ ...props }: ChipRemove.Props) {
  return <ComboboxPrimitive.ChipRemove data-slot="combobox-chip-remove" {...props} />;
}

/**
 * A list container for the items.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#portal)
 */
export namespace List {
  export type State = ComboboxPrimitive.List.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.List>;
}

export function List({ ...props }: List.Props) {
  return <ComboboxPrimitive.List data-slot="combobox-list" {...props} />;
}

/**
 * A portal element that moves the popup to a different part of the DOM.
 * By default, the portal element is appended to `<body>`.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#backdrop)
 */
export namespace Portal {
  export interface State extends ComboboxPrimitive.Portal.State {}
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Portal>;
}

export function Portal({ ...props }: Portal.Props) {
  return <ComboboxPrimitive.Portal data-slot="combobox-portal" {...props} />;
}

/**
 * An overlay displayed beneath the popup.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#positioner)
 */
export namespace Backdrop {
  export type State = ComboboxPrimitive.Backdrop.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Backdrop>;
}

export function Backdrop({ ...props }: Backdrop.Props) {
  return <ComboboxPrimitive.Backdrop data-slot="combobox-backdrop" {...props} />;
}

/**
 * Positions the popup against the trigger.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#popup)
 */
export namespace Positioner {
  export type State = ComboboxPrimitive.Positioner.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Positioner>;
}

export function Positioner({ ...props }: Positioner.Props) {
  return <ComboboxPrimitive.Positioner data-slot="combobox-positioner" {...props} />;
}

/**
 * A container for the list.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#arrow)
 */
export namespace Popup {
  export type State = ComboboxPrimitive.Popup.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Popup>;
}

export function Popup({ ...props }: Popup.Props) {
  return <ComboboxPrimitive.Popup data-slot="combobox-popup" {...props} />;
}

/**
 * Displays an element positioned against the anchor.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#arrow)
 */
export namespace Arrow {
  export type State = ComboboxPrimitive.Arrow.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Arrow>;
}

export function Arrow({ ...props }: Arrow.Props) {
  return <ComboboxPrimitive.Arrow data-slot="combobox-arrow" {...props} />;
}

/**
 * Displays a status message whose content changes are announced politely to screen readers.
 * Useful for conveying the status of an asynchronously loaded list.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#status)
 */
export namespace Status {
  export type State = ComboboxPrimitive.Status.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Status>;
}

export function Status({ ...props }: Status.Props) {
  return <ComboboxPrimitive.Status data-slot="combobox-status" {...props} />;
}

/**
 * Renders its children only when the list is empty.
 * Requires the `items` prop on the root component.
 * Announces changes politely to screen readers.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#empty)
 */
export namespace Empty {
  export type State = ComboboxPrimitive.Empty.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Empty>;
}

export function Empty({ ...props }: Empty.Props) {
  return <ComboboxPrimitive.Empty data-slot="combobox-empty" {...props} />;
}

/**
 * Renders filtered list items.
 * Doesn't render its own HTML element.
 *
 * If rendering a flat list, pass a function child to the {@link List} component instead, which implicitly wraps it.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#collection)
 */
export namespace Collection {
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Collection>;
}

export function Collection({ ...props }: Collection.Props) {
  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
}

/**
 * Displays a single row of items in a grid list.
 * Enable `grid` on the root component to turn the listbox into a grid.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#row)
 */
export namespace Row {
  export type State = ComboboxPrimitive.Row.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Row>;
}

export function Row({ ...props }: Row.Props) {
  return <ComboboxPrimitive.Row data-slot="combobox-row" {...props} />;
}

/**
 * An individual item in the list.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#item)
 */
export namespace Item {
  export type State = ComboboxPrimitive.Item.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Item>;
}

export function Item({ ...props }: Item.Props) {
  return <ComboboxPrimitive.Item data-slot="combobox-item" {...props} />;
}

/**
 * Indicates whether the item is selected.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#item-indicator)
 */
export namespace ItemIndicator {
  export type State = ComboboxPrimitive.ItemIndicator.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>;
}

export function ItemIndicator({ ...props }: ItemIndicator.Props) {
  return <ComboboxPrimitive.ItemIndicator data-slot="combobox-item-indicator" {...props} />;
}

/**
 * Groups related items with the corresponding label.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#group)
 */
export namespace Group {
  export type State = ComboboxPrimitive.Group.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Group>;
}

export function Group({ ...props }: Group.Props) {
  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />;
}

/**
 * An accessible label that is automatically associated with its parent group.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#group-label)
 */
export namespace GroupLabel {
  export type State = ComboboxPrimitive.GroupLabel.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>;
}

export function GroupLabel({ ...props }: GroupLabel.Props) {
  return <ComboboxPrimitive.GroupLabel data-slot="combobox-group-label" {...props} />;
}

/**
 * A separator element accessible to screen readers.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#separator)
 */
export namespace Separator {
  export type State = ComboboxPrimitive.Separator.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Separator>;
}

export function Separator({ ...props }: Separator.Props) {
  return <ComboboxPrimitive.Separator data-slot="combobox-separator" {...props} />;
}

export const useFilter = ComboboxPrimitive.useFilter;

'use client';import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';import type * as React from 'react';/** * Groups all parts of the combobox. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#root) */export namespace Root {  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Root>;  export type State = ComboboxPrimitive.Root.State;  export type Actions = ComboboxPrimitive.Root.Actions;  export type ChangeEventDetails = ComboboxPrimitive.Root.ChangeEventDetails;  export type ChangeEventReason = ComboboxPrimitive.Root.ChangeEventReason;  export type HighlightEventDetails = ComboboxPrimitive.Root.HighlightEventDetails;  export type HighlightEventReason = ComboboxPrimitive.Root.HighlightEventReason;}export function Root({ ...props }: Root.Props) {  return <ComboboxPrimitive.Root data-slot="combobox" {...props} />;}/** * The current value of the combobox. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#value) */export namespace Value {  export type State = ComboboxPrimitive.Value.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Value>;}export function Value({ ...props }: Value.Props) {  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;}/** * An icon that indicates that the trigger button opens the popup. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#icon) */export namespace Icon {  export type State = ComboboxPrimitive.Icon.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Icon>;}export function Icon({ ...props }: Icon.Props) {  return <ComboboxPrimitive.Icon data-slot="combobox-icon" {...props} />;}/** * A text input to search for items in the list. * Renders an `<input>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#input) */export namespace Input {  export type State = ComboboxPrimitive.Input.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Input>;}export function Input({ ...props }: Input.Props) {  return <ComboboxPrimitive.Input data-slot="combobox-input" {...props} />;}/** * Clears the value when clicked. * Renders a `<button>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#clear) */export namespace Clear {  export type State = ComboboxPrimitive.Clear.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Clear>;}export function Clear({ ...props }: Clear.Props) {  return <ComboboxPrimitive.Clear data-slot="combobox-clear" {...props} />;}/** * A button that opens the popup. * Renders a `<button>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#trigger) */export namespace Trigger {  export type State = ComboboxPrimitive.Trigger.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Trigger>;}export function Trigger({ ...props }: Trigger.Props) {  return <ComboboxPrimitive.Trigger data-slot="combobox-trigger" {...props} />;}/** * A container for the chips in a multiselectable input. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chips) */export namespace Chips {  export type State = ComboboxPrimitive.Chips.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Chips>;}export function Chips({ ...props }: Chips.Props) {  return <ComboboxPrimitive.Chips data-slot="combobox-chips" {...props} />;}/** * A component that renders a chip of the combobox. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip) */export namespace Chip {  export type State = ComboboxPrimitive.Chip.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Chip>;}/** * An individual chip that represents a value in a multiselectable input. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip-remove) */export function Chip({ ...props }: Chip.Props) {  return <ComboboxPrimitive.Chip data-slot="combobox-chip" {...props} />;}/** * A button to remove a chip. * Renders a `<button>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#list) */export namespace ChipRemove {  export type State = ComboboxPrimitive.ChipRemove.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.ChipRemove>;}export function ChipRemove({ ...props }: ChipRemove.Props) {  return <ComboboxPrimitive.ChipRemove data-slot="combobox-chip-remove" {...props} />;}/** * A list container for the items. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#portal) */export namespace List {  export type State = ComboboxPrimitive.List.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.List>;}export function List({ ...props }: List.Props) {  return <ComboboxPrimitive.List data-slot="combobox-list" {...props} />;}/** * A portal element that moves the popup to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#backdrop) */export namespace Portal {  export interface State extends ComboboxPrimitive.Portal.State {}  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Portal>;}export function Portal({ ...props }: Portal.Props) {  return <ComboboxPrimitive.Portal data-slot="combobox-portal" {...props} />;}/** * An overlay displayed beneath the popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#positioner) */export namespace Backdrop {  export type State = ComboboxPrimitive.Backdrop.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Backdrop>;}export function Backdrop({ ...props }: Backdrop.Props) {  return <ComboboxPrimitive.Backdrop data-slot="combobox-backdrop" {...props} />;}/** * Positions the popup against the trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#popup) */export namespace Positioner {  export type State = ComboboxPrimitive.Positioner.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Positioner>;}export function Positioner({ ...props }: Positioner.Props) {  return <ComboboxPrimitive.Positioner data-slot="combobox-positioner" {...props} />;}/** * A container for the list. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#arrow) */export namespace Popup {  export type State = ComboboxPrimitive.Popup.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Popup>;}export function Popup({ ...props }: Popup.Props) {  return <ComboboxPrimitive.Popup data-slot="combobox-popup" {...props} />;}/** * Displays an element positioned against the anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#arrow) */export namespace Arrow {  export type State = ComboboxPrimitive.Arrow.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Arrow>;}export function Arrow({ ...props }: Arrow.Props) {  return <ComboboxPrimitive.Arrow data-slot="combobox-arrow" {...props} />;}/** * Displays a status message whose content changes are announced politely to screen readers. * Useful for conveying the status of an asynchronously loaded list. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#status) */export namespace Status {  export type State = ComboboxPrimitive.Status.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Status>;}export function Status({ ...props }: Status.Props) {  return <ComboboxPrimitive.Status data-slot="combobox-status" {...props} />;}/** * Renders its children only when the list is empty. * Requires the `items` prop on the root component. * Announces changes politely to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#empty) */export namespace Empty {  export type State = ComboboxPrimitive.Empty.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Empty>;}export function Empty({ ...props }: Empty.Props) {  return <ComboboxPrimitive.Empty data-slot="combobox-empty" {...props} />;}/** * Renders filtered list items. * Doesn't render its own HTML element. * * If rendering a flat list, pass a function child to the {@link List} component instead, which implicitly wraps it. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#collection) */export namespace Collection {  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Collection>;}export function Collection({ ...props }: Collection.Props) {  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;}/** * Displays a single row of items in a grid list. * Enable `grid` on the root component to turn the listbox into a grid. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#row) */export namespace Row {  export type State = ComboboxPrimitive.Row.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Row>;}export function Row({ ...props }: Row.Props) {  return <ComboboxPrimitive.Row data-slot="combobox-row" {...props} />;}/** * An individual item in the list. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#item) */export namespace Item {  export type State = ComboboxPrimitive.Item.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Item>;}export function Item({ ...props }: Item.Props) {  return <ComboboxPrimitive.Item data-slot="combobox-item" {...props} />;}/** * Indicates whether the item is selected. * Renders a `<span>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#item-indicator) */export namespace ItemIndicator {  export type State = ComboboxPrimitive.ItemIndicator.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>;}export function ItemIndicator({ ...props }: ItemIndicator.Props) {  return <ComboboxPrimitive.ItemIndicator data-slot="combobox-item-indicator" {...props} />;}/** * Groups related items with the corresponding label. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#group) */export namespace Group {  export type State = ComboboxPrimitive.Group.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Group>;}export function Group({ ...props }: Group.Props) {  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />;}/** * An accessible label that is automatically associated with its parent group. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#group-label) */export namespace GroupLabel {  export type State = ComboboxPrimitive.GroupLabel.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>;}export function GroupLabel({ ...props }: GroupLabel.Props) {  return <ComboboxPrimitive.GroupLabel data-slot="combobox-group-label" {...props} />;}/** * A separator element accessible to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#separator) */export namespace Separator {  export type State = ComboboxPrimitive.Separator.State;  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Separator>;}export function Separator({ ...props }: Separator.Props) {  return <ComboboxPrimitive.Separator data-slot="combobox-separator" {...props} />;}export const useFilter = ComboboxPrimitive.useFilter;

Update the import paths to match your project setup.

Usage

import * as Combobox from "@/components/caprice-ui/combobox"

import * as Combobox from "@/components/caprice-ui/combobox"

import * as Combobox from "@caprice-ui/react/combobox"

import * as Combobox from "@caprice-ui/react/combobox"

'use client'; import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox'; import type * as React from 'react'; /** * Groups all parts of the combobox. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#root) */ export namespace Root { export type Props = React.ComponentProps<typeof ComboboxPrimitive.Root>; export type State = ComboboxPrimitive.Root.State; export type Actions = ComboboxPrimitive.Root.Actions; export type ChangeEventDetails = ComboboxPrimitive.Root.ChangeEventDetails; export type ChangeEventReason = ComboboxPrimitive.Root.ChangeEventReason; export type HighlightEventDetails = ComboboxPrimitive.Root.HighlightEventDetails; export type HighlightEventReason = ComboboxPrimitive.Root.HighlightEventReason; } export function Root({ ...props }: Root.Props) { return <ComboboxPrimitive.Root data-slot="combobox" {...props} />; } /** * The current value of the combobox. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#value) */ export namespace Value { export type State = ComboboxPrimitive.Value.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Value>; } export function Value({ ...props }: Value.Props) { return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />; } /** * An icon that indicates that the trigger button opens the popup. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#icon) */ export namespace Icon { export type State = ComboboxPrimitive.Icon.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Icon>; } export function Icon({ ...props }: Icon.Props) { return <ComboboxPrimitive.Icon data-slot="combobox-icon" {...props} />; } /** * A text input to search for items in the list. * Renders an `<input>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#input) */ export namespace Input { export type State = ComboboxPrimitive.Input.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Input>; } export function Input({ ...props }: Input.Props) { return <ComboboxPrimitive.Input data-slot="combobox-input" {...props} />; } /** * Clears the value when clicked. * Renders a `<button>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#clear) */ export namespace Clear { export type State = ComboboxPrimitive.Clear.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Clear>; } export function Clear({ ...props }: Clear.Props) { return <ComboboxPrimitive.Clear data-slot="combobox-clear" {...props} />; } /** * A button that opens the popup. * Renders a `<button>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#trigger) */ export namespace Trigger { export type State = ComboboxPrimitive.Trigger.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Trigger>; } export function Trigger({ ...props }: Trigger.Props) { return <ComboboxPrimitive.Trigger data-slot="combobox-trigger" {...props} />; } /** * A container for the chips in a multiselectable input. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chips) */ export namespace Chips { export type State = ComboboxPrimitive.Chips.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Chips>; } export function Chips({ ...props }: Chips.Props) { return <ComboboxPrimitive.Chips data-slot="combobox-chips" {...props} />; } /** * A component that renders a chip of the combobox. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip) */ export namespace Chip { export type State = ComboboxPrimitive.Chip.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Chip>; } /** * An individual chip that represents a value in a multiselectable input. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip-remove) */ export function Chip({ ...props }: Chip.Props) { return <ComboboxPrimitive.Chip data-slot="combobox-chip" {...props} />; } /** * A button to remove a chip. * Renders a `<button>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#list) */ export namespace ChipRemove { export type State = ComboboxPrimitive.ChipRemove.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.ChipRemove>; } export function ChipRemove({ ...props }: ChipRemove.Props) { return <ComboboxPrimitive.ChipRemove data-slot="combobox-chip-remove" {...props} />; } /** * A list container for the items. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#portal) */ export namespace List { export type State = ComboboxPrimitive.List.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.List>; } export function List({ ...props }: List.Props) { return <ComboboxPrimitive.List data-slot="combobox-list" {...props} />; } /** * A portal element that moves the popup to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#backdrop) */ export namespace Portal { export interface State extends ComboboxPrimitive.Portal.State {} export type Props = React.ComponentProps<typeof ComboboxPrimitive.Portal>; } export function Portal({ ...props }: Portal.Props) { return <ComboboxPrimitive.Portal data-slot="combobox-portal" {...props} />; } /** * An overlay displayed beneath the popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#positioner) */ export namespace Backdrop { export type State = ComboboxPrimitive.Backdrop.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Backdrop>; } export function Backdrop({ ...props }: Backdrop.Props) { return <ComboboxPrimitive.Backdrop data-slot="combobox-backdrop" {...props} />; } /** * Positions the popup against the trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#popup) */ export namespace Positioner { export type State = ComboboxPrimitive.Positioner.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Positioner>; } export function Positioner({ ...props }: Positioner.Props) { return <ComboboxPrimitive.Positioner data-slot="combobox-positioner" {...props} />; } /** * A container for the list. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#arrow) */ export namespace Popup { export type State = ComboboxPrimitive.Popup.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Popup>; } export function Popup({ ...props }: Popup.Props) { return <ComboboxPrimitive.Popup data-slot="combobox-popup" {...props} />; } /** * Displays an element positioned against the anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#arrow) */ export namespace Arrow { export type State = ComboboxPrimitive.Arrow.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Arrow>; } export function Arrow({ ...props }: Arrow.Props) { return <ComboboxPrimitive.Arrow data-slot="combobox-arrow" {...props} />; } /** * Displays a status message whose content changes are announced politely to screen readers. * Useful for conveying the status of an asynchronously loaded list. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#status) */ export namespace Status { export type State = ComboboxPrimitive.Status.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Status>; } export function Status({ ...props }: Status.Props) { return <ComboboxPrimitive.Status data-slot="combobox-status" {...props} />; } /** * Renders its children only when the list is empty. * Requires the `items` prop on the root component. * Announces changes politely to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#empty) */ export namespace Empty { export type State = ComboboxPrimitive.Empty.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Empty>; } export function Empty({ ...props }: Empty.Props) { return <ComboboxPrimitive.Empty data-slot="combobox-empty" {...props} />; } /** * Renders filtered list items. * Doesn't render its own HTML element. * * If rendering a flat list, pass a function child to the {@link List} component instead, which implicitly wraps it. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#collection) */ export namespace Collection { export type Props = React.ComponentProps<typeof ComboboxPrimitive.Collection>; } export function Collection({ ...props }: Collection.Props) { return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />; } /** * Displays a single row of items in a grid list. * Enable `grid` on the root component to turn the listbox into a grid. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#row) */ export namespace Row { export type State = ComboboxPrimitive.Row.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Row>; } export function Row({ ...props }: Row.Props) { return <ComboboxPrimitive.Row data-slot="combobox-row" {...props} />; } /** * An individual item in the list. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#item) */ export namespace Item { export type State = ComboboxPrimitive.Item.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Item>; } export function Item({ ...props }: Item.Props) { return <ComboboxPrimitive.Item data-slot="combobox-item" {...props} />; } /** * Indicates whether the item is selected. * Renders a `<span>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#item-indicator) */ export namespace ItemIndicator { export type State = ComboboxPrimitive.ItemIndicator.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>; } export function ItemIndicator({ ...props }: ItemIndicator.Props) { return <ComboboxPrimitive.ItemIndicator data-slot="combobox-item-indicator" {...props} />; } /** * Groups related items with the corresponding label. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#group) */ export namespace Group { export type State = ComboboxPrimitive.Group.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Group>; } export function Group({ ...props }: Group.Props) { return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />; } /** * An accessible label that is automatically associated with its parent group. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#group-label) */ export namespace GroupLabel { export type State = ComboboxPrimitive.GroupLabel.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>; } export function GroupLabel({ ...props }: GroupLabel.Props) { return <ComboboxPrimitive.GroupLabel data-slot="combobox-group-label" {...props} />; } /** * A separator element accessible to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox) * * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#separator) */ export namespace Separator { export type State = ComboboxPrimitive.Separator.State; export type Props = React.ComponentProps<typeof ComboboxPrimitive.Separator>; } export function Separator({ ...props }: Separator.Props) { return <ComboboxPrimitive.Separator data-slot="combobox-separator" {...props} />; } export const useFilter = ComboboxPrimitive.useFilter;

Installation

Install the following dependencies:

Add a cn helper

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Examples

API Reference

Root

On this page

Contribute