Autocomplete

'use client';

import * as Autocomplete from '@components/caprice-ui/autocomplete';

export default function AutocompleteDemo() {
  return (
    <Autocomplete.Root>
      <Autocomplete.Input />
    </Autocomplete.Root>
  );
}

Installation

npx shadcn@latest add @caprice/autocomplete

npx shadcn@latest add @caprice/autocomplete

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 { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';
import type * as React from 'react';

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

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

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

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

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

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

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

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

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

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

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

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

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

export function List({ ...props }: List.Props) {
  return <AutocompletePrimitive.List data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#portal)
 */
export namespace Portal {
  export type State = AutocompletePrimitive.Portal.State;
  export interface Props extends React.ComponentProps<typeof AutocompletePrimitive.Portal> {}
}

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

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

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

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

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

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

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

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

export function Arrow({ ...props }: Arrow.Props) {
  return <AutocompletePrimitive.Arrow data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#status)
 */
export namespace Status {
  export type State = AutocompletePrimitive.Status.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Status>;
}

export function Status({ ...props }: Status.Props) {
  return <AutocompletePrimitive.Status data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#empty)
 */
export namespace Empty {
  export type State = AutocompletePrimitive.Empty.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Empty>;
}

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

/**
 * Renders filtered list items.
 * Doesn't render its own HTML element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#collection)
 */
export namespace Collection {
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Collection>;
}

export function Collection({ ...props }: Collection.Props) {
  return <AutocompletePrimitive.Collection data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#row)
 */
export namespace Row {
  export type State = AutocompletePrimitive.Row.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Row>;
}

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

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

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

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

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

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

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

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

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

'use client';import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';import type * as React from 'react';/** * Groups all parts of the autocomplete. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#root) */export namespace Root {  export type State = AutocompletePrimitive.Root.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Root>;  export type Actions = AutocompletePrimitive.Root.Actions;  export type ChangeEventDetails = AutocompletePrimitive.Root.ChangeEventDetails;  export type ChangeEventReason = AutocompletePrimitive.Root.ChangeEventReason;  export type HighlightEventDetails = AutocompletePrimitive.Root.HighlightEventDetails;  export type HighlightEventReason = AutocompletePrimitive.Root.HighlightEventReason;}export function Root({ ...props }: Root.Props) {  return <AutocompletePrimitive.Root data-slot="autocomplete" {...props} />;}/** * The current value of the autocomplete. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#value) */export namespace Value {  export type State = AutocompletePrimitive.Value.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Value>;}export function Value({ ...props }: Value.Props) {  return <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />;}/** * A text input to search for items in the list. * Renders an `<input>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#input) */export namespace Input {  export type State = AutocompletePrimitive.Input.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Input>;}export function Input({ ...props }: Input.Props) {  return <AutocompletePrimitive.Input data-slot="autocomplete-input" {...props} />;}/** * A button that opens the popup. * Renders a `<button>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#trigger) */export namespace Trigger {  export type State = AutocompletePrimitive.Trigger.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Trigger>;}export function Trigger({ ...props }: Trigger.Props) {  return <AutocompletePrimitive.Trigger data-slot="autocomplete-trigger" {...props} />;}/** * An icon that indicates that the trigger button opens the popup. * Renders a `<span>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#icon) */export namespace Icon {  export type State = AutocompletePrimitive.Icon.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Icon>;}export function Icon({ ...props }: Icon.Props) {  return <AutocompletePrimitive.Icon data-slot="autocomplete-icon" {...props} />;}/** * Clears the value when clicked. * Renders a `<button>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#clear) */export namespace Clear {  export type State = AutocompletePrimitive.Clear.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Clear>;}export function Clear({ ...props }: Clear.Props) {  return <AutocompletePrimitive.Clear data-slot="autocomplete-clear" {...props} />;}/** * A list container for the items. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#list) */export namespace List {  export type State = AutocompletePrimitive.List.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.List>;}export function List({ ...props }: List.Props) {  return <AutocompletePrimitive.List data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#portal) */export namespace Portal {  export type State = AutocompletePrimitive.Portal.State;  export interface Props extends React.ComponentProps<typeof AutocompletePrimitive.Portal> {}}export function Portal({ ...props }: Portal.Props) {  return <AutocompletePrimitive.Portal data-slot="autocomplete-portal" {...props} />;}/** * An overlay displayed beneath the popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#backdrop) */export namespace Backdrop {  export type State = AutocompletePrimitive.Backdrop.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Backdrop>;}export function Backdrop({ ...props }: Backdrop.Props) {  return <AutocompletePrimitive.Backdrop data-slot="autocomplete-backdrop" {...props} />;}/** * Positions the popup against the trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#positioner) */export namespace Positioner {  export type State = AutocompletePrimitive.Positioner.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Positioner>;}export function Positioner({ ...props }: Positioner.Props) {  return <AutocompletePrimitive.Positioner data-slot="autocomplete-positioner" {...props} />;}/** * A container for the list. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#popup) */export namespace Popup {  export type State = AutocompletePrimitive.Popup.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Popup>;}export function Popup({ ...props }: Popup.Props) {  return <AutocompletePrimitive.Popup data-slot="autocomplete-popup" {...props} />;}/** * Displays an element positioned against the anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#arrow) */export namespace Arrow {  export type State = AutocompletePrimitive.Arrow.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Arrow>;}export function Arrow({ ...props }: Arrow.Props) {  return <AutocompletePrimitive.Arrow data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#status) */export namespace Status {  export type State = AutocompletePrimitive.Status.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Status>;}export function Status({ ...props }: Status.Props) {  return <AutocompletePrimitive.Status data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#empty) */export namespace Empty {  export type State = AutocompletePrimitive.Empty.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Empty>;}export function Empty({ ...props }: Empty.Props) {  return <AutocompletePrimitive.Empty data-slot="autocomplete-empty" {...props} />;}/** * Renders filtered list items. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#collection) */export namespace Collection {  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Collection>;}export function Collection({ ...props }: Collection.Props) {  return <AutocompletePrimitive.Collection data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#row) */export namespace Row {  export type State = AutocompletePrimitive.Row.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Row>;}export function Row({ ...props }: Row.Props) {  return <AutocompletePrimitive.Row data-slot="autocomplete-row" {...props} />;}/** * An individual item in the list. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#item) */export namespace Item {  export type State = AutocompletePrimitive.Item.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Item>;}export function Item({ ...props }: Item.Props) {  return <AutocompletePrimitive.Item data-slot="autocomplete-item" {...props} />;}/** * Groups related items with the corresponding label. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#group) */export namespace Group {  export type State = AutocompletePrimitive.Group.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Group>;}export function Group({ ...props }: Group.Props) {  return <AutocompletePrimitive.Group data-slot="autocomplete-group" {...props} />;}/** * An accessible label that is automatically associated with its parent group. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#group-label) */export namespace GroupLabel {  export type State = AutocompletePrimitive.GroupLabel.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>;}export function GroupLabel({ ...props }: GroupLabel.Props) {  return <AutocompletePrimitive.GroupLabel data-slot="autocomplete-group-label" {...props} />;}/** * A separator element accessible to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#separator) */export namespace Separator {  export type State = AutocompletePrimitive.Separator.State;  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Separator>;}export function Separator({ ...props }: Separator.Props) {  return <AutocompletePrimitive.Separator data-slot="autocomplete-separator" {...props} />;}

Update the import paths to match your project setup.

Usage

import * as Autocomplete from "@/components/caprice-ui/autocomplete"

import * as Autocomplete from "@/components/caprice-ui/autocomplete"

import * as Autocomplete from "@caprice-ui/react/autocomplete"

import * as Autocomplete from "@caprice-ui/react/autocomplete"

'use client'; import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete'; import type * as React from 'react'; /** * Groups all parts of the autocomplete. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#root) */ export namespace Root { export type State = AutocompletePrimitive.Root.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Root>; export type Actions = AutocompletePrimitive.Root.Actions; export type ChangeEventDetails = AutocompletePrimitive.Root.ChangeEventDetails; export type ChangeEventReason = AutocompletePrimitive.Root.ChangeEventReason; export type HighlightEventDetails = AutocompletePrimitive.Root.HighlightEventDetails; export type HighlightEventReason = AutocompletePrimitive.Root.HighlightEventReason; } export function Root({ ...props }: Root.Props) { return <AutocompletePrimitive.Root data-slot="autocomplete" {...props} />; } /** * The current value of the autocomplete. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#value) */ export namespace Value { export type State = AutocompletePrimitive.Value.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Value>; } export function Value({ ...props }: Value.Props) { return <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />; } /** * A text input to search for items in the list. * Renders an `<input>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#input) */ export namespace Input { export type State = AutocompletePrimitive.Input.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Input>; } export function Input({ ...props }: Input.Props) { return <AutocompletePrimitive.Input data-slot="autocomplete-input" {...props} />; } /** * A button that opens the popup. * Renders a `<button>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#trigger) */ export namespace Trigger { export type State = AutocompletePrimitive.Trigger.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Trigger>; } export function Trigger({ ...props }: Trigger.Props) { return <AutocompletePrimitive.Trigger data-slot="autocomplete-trigger" {...props} />; } /** * An icon that indicates that the trigger button opens the popup. * Renders a `<span>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#icon) */ export namespace Icon { export type State = AutocompletePrimitive.Icon.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Icon>; } export function Icon({ ...props }: Icon.Props) { return <AutocompletePrimitive.Icon data-slot="autocomplete-icon" {...props} />; } /** * Clears the value when clicked. * Renders a `<button>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#clear) */ export namespace Clear { export type State = AutocompletePrimitive.Clear.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Clear>; } export function Clear({ ...props }: Clear.Props) { return <AutocompletePrimitive.Clear data-slot="autocomplete-clear" {...props} />; } /** * A list container for the items. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#list) */ export namespace List { export type State = AutocompletePrimitive.List.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.List>; } export function List({ ...props }: List.Props) { return <AutocompletePrimitive.List data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#portal) */ export namespace Portal { export type State = AutocompletePrimitive.Portal.State; export interface Props extends React.ComponentProps<typeof AutocompletePrimitive.Portal> {} } export function Portal({ ...props }: Portal.Props) { return <AutocompletePrimitive.Portal data-slot="autocomplete-portal" {...props} />; } /** * An overlay displayed beneath the popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#backdrop) */ export namespace Backdrop { export type State = AutocompletePrimitive.Backdrop.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Backdrop>; } export function Backdrop({ ...props }: Backdrop.Props) { return <AutocompletePrimitive.Backdrop data-slot="autocomplete-backdrop" {...props} />; } /** * Positions the popup against the trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#positioner) */ export namespace Positioner { export type State = AutocompletePrimitive.Positioner.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Positioner>; } export function Positioner({ ...props }: Positioner.Props) { return <AutocompletePrimitive.Positioner data-slot="autocomplete-positioner" {...props} />; } /** * A container for the list. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#popup) */ export namespace Popup { export type State = AutocompletePrimitive.Popup.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Popup>; } export function Popup({ ...props }: Popup.Props) { return <AutocompletePrimitive.Popup data-slot="autocomplete-popup" {...props} />; } /** * Displays an element positioned against the anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#arrow) */ export namespace Arrow { export type State = AutocompletePrimitive.Arrow.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Arrow>; } export function Arrow({ ...props }: Arrow.Props) { return <AutocompletePrimitive.Arrow data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#status) */ export namespace Status { export type State = AutocompletePrimitive.Status.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Status>; } export function Status({ ...props }: Status.Props) { return <AutocompletePrimitive.Status data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#empty) */ export namespace Empty { export type State = AutocompletePrimitive.Empty.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Empty>; } export function Empty({ ...props }: Empty.Props) { return <AutocompletePrimitive.Empty data-slot="autocomplete-empty" {...props} />; } /** * Renders filtered list items. * Doesn't render its own HTML element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#collection) */ export namespace Collection { export type Props = React.ComponentProps<typeof AutocompletePrimitive.Collection>; } export function Collection({ ...props }: Collection.Props) { return <AutocompletePrimitive.Collection data-slot="autocomplete-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 Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#row) */ export namespace Row { export type State = AutocompletePrimitive.Row.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Row>; } export function Row({ ...props }: Row.Props) { return <AutocompletePrimitive.Row data-slot="autocomplete-row" {...props} />; } /** * An individual item in the list. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#item) */ export namespace Item { export type State = AutocompletePrimitive.Item.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Item>; } export function Item({ ...props }: Item.Props) { return <AutocompletePrimitive.Item data-slot="autocomplete-item" {...props} />; } /** * Groups related items with the corresponding label. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#group) */ export namespace Group { export type State = AutocompletePrimitive.Group.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Group>; } export function Group({ ...props }: Group.Props) { return <AutocompletePrimitive.Group data-slot="autocomplete-group" {...props} />; } /** * An accessible label that is automatically associated with its parent group. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#group-label) */ export namespace GroupLabel { export type State = AutocompletePrimitive.GroupLabel.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>; } export function GroupLabel({ ...props }: GroupLabel.Props) { return <AutocompletePrimitive.GroupLabel data-slot="autocomplete-group-label" {...props} />; } /** * A separator element accessible to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete) * * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#separator) */ export namespace Separator { export type State = AutocompletePrimitive.Separator.State; export type Props = React.ComponentProps<typeof AutocompletePrimitive.Separator>; } export function Separator({ ...props }: Separator.Props) { return <AutocompletePrimitive.Separator data-slot="autocomplete-separator" {...props} />; }

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