フォームと選択@neumorphism-ui/combobox

Combobox

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

@neumorphism-ui/combobox

Registry JSON

プレビュー

都市を検索

インストール

npx shadcn@latest add @neumorphism-ui/combobox

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

"use client";

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

Example

export default function Example() {
  const cities = ["Busan", "London", "Seoul", "Tokyo"];
  return (<div className="w-full max-w-sm"><Combobox items={cities}><ComboboxLabel>{"都市を検索"}</ComboboxLabel><ComboboxInput placeholder={"都市を検索"} /><ComboboxContent><ComboboxEmpty>{"一致する都市はありません。"}</ComboboxEmpty><ComboboxList>{(city: string) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>}</ComboboxList></ComboboxContent></Combobox></div>);
}

API リファレンス

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

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ