Home/Components/Form & Input/Combobox

FormCombobox

検索可能なセレクトボックス。候補をフィルタリングして選択できる。

import { FormCombobox } from "@blueai/ui"

Examples

Basic

都市

const OPTIONS: ComboboxOption[] = [
  { value: "tokyo", label: "東京" },
  { value: "osaka", label: "大阪" },
  { value: "nagoya", label: "名古屋" },
];
const [value, setValue] = useState("");

<FormCombobox
  label="都市"
  value={value}
  onChange={setValue}
  options={OPTIONS}
  placeholder="都市を選択..."
/>

Props

Prop	Type	Default	Description
value*	string	—	選択値
onChange	(value: string) => void	—	値変更ハンドラ
options*	ComboboxOption[]	—	選択候補 { value, label }
label	string	—	ラベルテキスト
placeholder	string	—	プレースホルダー
error	string	—	エラーメッセージ
required	boolean	false	必須マーク表示
disabled	boolean	false	無効状態

Types

ComboboxOption

type ComboboxOption = {
  value: string;
  label: string;
};