Caroa UI

Select

ドロップダウン選択コンポーネント。

インポート

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@caroainc/ui-components/client'

基本的な使い方

Loading...
<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="フルーツを選択" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">りんご</SelectItem>
    <SelectItem value="banana">バナナ</SelectItem>
    <SelectItem value="orange">オレンジ</SelectItem>
  </SelectContent>
</Select>

無効状態

Loading...
<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="選択不可" />
  </SelectTrigger>
  ...
</Select>

Props

Select

PropTypeDefaultDescription
valuestring-選択値(制御コンポーネント)
defaultValuestring-初期選択値
onValueChange(value: string) => void-選択変更時のコールバック
disabledbooleanfalse無効状態

SelectItem

PropTypeDefaultDescription
value*string-選択肢の値
disabledbooleanfalse選択肢を無効化

On this page