Caroa UI

CommandCombobox

検索可能なコンボボックスコンポーネント。

インポート

'use client'

基本的な使い方

const options = [
  { value: 'apple', label: 'りんご' },
  { value: 'banana', label: 'バナナ' },
  { value: 'orange', label: 'オレンジ' },
]
 
const [value, setValue] = useState('')
 
<CommandCombobox
  options={options}
  value={value}
  onValueChange={setValue}
  placeholder="フルーツを選択..."
  searchPlaceholder="検索..."
  emptyMessage="見つかりません"
/>

Props

PropTypeDefaultDescription
options*{ value: string; label: string }[]-選択肢の配列
valuestring-選択された値
onValueChange(value: string) => void-値が変更された時のコールバック
placeholderstring'選択してください'プレースホルダー
searchPlaceholderstring'検索...'検索欄のプレースホルダー
emptyMessagestring'見つかりません'結果が空の時のメッセージ

On this page