Combo Box

PreviousNext

React aria components Combo Box with shadcn characteristics.

Docs
ouiui

Preview

Loading preview…
registry/default/ui/oui-combo-box.tsx
"use client";

import type { FieldStylesProps } from "@/registry/default/ui/oui-field";
import { composeTailwindRenderProps } from "@/registry/default/ui/oui-base";
import { fieldStyles } from "@/registry/default/ui/oui-field";
import * as Rac from "react-aria-components";

export function ComboBox<T extends object>({
  className,
  orientation,
  ...props
}: Rac.ComboBoxProps<T> & FieldStylesProps) {
  return (
    <Rac.ComboBox
      data-slot="combo-box"
      data-slot-type="field"
      className={composeTailwindRenderProps(
        className,
        fieldStyles({ orientation }),
      )}
      {...props}
    />
  );
}

Installation

npx shadcn@latest add @oui/oui-combo-box

Usage

import { OuiComboBox } from "@/components/ui/oui-combo-box"
<OuiComboBox />