ComboBox

Filter a list of options by typing in a text field.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field, ListBox, Popover
ComboBox example
import { ComboBox, ComboBoxItem } from "@/shim-ui/combo-box";

export default () => (
  <ComboBox label="Ice cream" placeholder="Pick a flavor">
    <ComboBoxItem>Chocolate</ComboBoxItem>
    <ComboBoxItem>Mint</ComboBoxItem>
    <ComboBoxItem>Strawberry</ComboBoxItem>
    <ComboBoxItem>Vanilla</ComboBoxItem>
  </ComboBox>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add combo-box

Size

Use the size prop to set the size of the combo box.

Size example
import { ComboBox, ComboBoxItem } from "@/shim-ui/combo-box";

export default () => (
  <>
    <ComboBox label="Size 1" placeholder="Pick a framework" size={1}>
      <ComboBoxItem>React</ComboBoxItem>
      <ComboBoxItem>Svelte</ComboBoxItem>
    </ComboBox>

    <ComboBox label="Size 2" placeholder="Pick a framework" size={2}>
      <ComboBoxItem>React</ComboBoxItem>
      <ComboBoxItem>Svelte</ComboBoxItem>
    </ComboBox>

    <ComboBox label="Size 3" placeholder="Pick a framework" size={3}>
      <ComboBoxItem>React</ComboBoxItem>
      <ComboBoxItem>Svelte</ComboBoxItem>
    </ComboBox>

    <ComboBox label="Size 4" placeholder="Pick a framework" size={4}>
      <ComboBoxItem>React</ComboBoxItem>
      <ComboBoxItem>Svelte</ComboBoxItem>
    </ComboBox>
  </>
);

Content

ComboBox follows the Collections API and accepts both static and dynamic items.

To use dynamic items, pass an items prop to the combo box and a render function as children. The render function is called with each item initems and should return a React element.

Selected topic id:

Content example
"use client";
import { useState } from "react";
import type { Key } from "react-aria-components";
import { ComboBox, ComboBoxItem } from "@/shim-ui/combo-box";

export default () => {
  let options = [
    { id: 1, name: "Aerospace" },
    { id: 2, name: "Mechanical" },
    { id: 3, name: "Civil" },
    { id: 4, name: "Biomedical" },
    { id: 5, name: "Nuclear" },
    { id: 6, name: "Industrial" },
    { id: 7, name: "Chemical" },
    { id: 8, name: "Agricultural" },
    { id: 9, name: "Electrical" },
  ];

  let [majorId, setMajorId] = useState<Key | null>(null);

  return (
    <>
      <ComboBox
        aria-label="Select a major"
        defaultItems={options}
        onSelectionChange={setMajorId}
      >
        {(item) => <ComboBoxItem>{item.name}</ComboBoxItem>}
      </ComboBox>
      <p>Selected topic id: {majorId}</p>
    </>
  );
};