Neumorphism UI

Combobox

候補を検索してから値を選ぶ場合に使います。

プレビュー

都市の検索と選択

入力で都市の候補を絞り込み、一致しない場合は案内を表示します。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/combobox

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

items、ComboboxLabel、ComboboxInput を提供します。空の結果と ComboboxList を構成し、各結果を固有の ComboboxItem として表示します。

"use client";

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList } from "@/components/ui/combobox";

const cities = ["London", "Seoul", "Tokyo"];

export default function Example() {
  return (
    <Combobox items={cities}>
      <ComboboxLabel>City</ComboboxLabel>
      <ComboboxInput placeholder="Search cities" />
      <ComboboxContent>
        <ComboboxEmpty>No matching cities.</ComboboxEmpty>
        <ComboboxList>{(city: string) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>}</ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

API リファレンス

絞り込み、空の結果、キーボード選択を扱う検索入力。 ComboboxLabel と空結果のメッセージを用意し、矢印、Enter、Escape と実際の IME 入力を確認します。

コンポーネントプロパティ型デフォルト説明
Comboboxitemsunknown[]—検索と選択の元になる項目です。
Comboboxvalue / onValueChangeCombobox.Root.Props—制御状態または初期状態を指定します。
Comboboxmultipleboolean—複数項目の選択を許可します。

アクセシビリティ

  • 01

    ComboboxLabel と空結果のメッセージを用意し、矢印、Enter、Escape と実際の IME 入力を確認します。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。