An input combined with a list of predefined items to select.
Installation
npx shadcn@latest add @caprice/comboboxnpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd 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 };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;Update the import paths to match your project setup.
Usage
import * as Combobox from "@/components/caprice-ui/combobox"import * as Combobox from "@caprice-ui/react/combobox"Examples
API Reference
Root
Prop
Type