ホーム/コンポーネント/フォームと入力/セレクト Select

FormSelect

セレクトボックスコンポーネント。children に <option> 要素を渡す。onChange は (value: string) => void 形式。

import { FormSelect } from "@blueai/ui"

Examples

Basic

支払い条件

const [value, setValue] = useState("monthly");

<FormSelect label="支払い条件" value={value} onChange={setValue}>
  <option value="monthly">月末締め翌月末払い</option>
  <option value="immediate">即日払い</option>
  <option value="net30">30日後払い</option>
</FormSelect>

With Error

カテゴリ

選択してください

<FormSelect label="カテゴリ" value="" onChange={setValue} error="選択してください">
  <option value="">選択してください</option>
  <option value="a">カテゴリA</option>
</FormSelect>

Disabled

プラン

<FormSelect label="プラン" value="pro" onChange={setValue} disabled>
  <option value="pro">Pro</option>
</FormSelect>

Props

Prop	Type	Default	Description
value*	string	—	選択値
onChange	(value: string) => void	—	値変更ハンドラ
label	string	—	ラベルテキスト
error	string	—	エラーメッセージ
required	boolean	false	必須マーク表示
disabled	boolean	false	無効状態
children*	ReactNode	—	<option> 要素