FormInput
テキスト入力コンポーネント。label / error / multiline / type=number(カンマ付き)/ size をサポート。onChange は (value: string) => void 形式。
import { FormInput } from "@blueai/ui"Examples
Basic
With Error
13桁の番号を入力してください
Number (with comma formatting)
内部値: 1000
Multiline
Sizes
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | string | — | 入力値 |
| onChange | (value: string) => void | — | 値変更ハンドラ(イベントではなく値を直接受け取る) |
| onBlur | () => void | — | フォーカスアウトハンドラ |
| label | string | — | ラベルテキスト |
| placeholder | string | — | プレースホルダー |
| error | string | — | エラーメッセージ |
| required | boolean | false | 必須マーク表示 |
| multiline | boolean | false | textarea として描画 |
| type | "text" | "number" | "email" | ... | "text" | HTML input type。number はカンマ付き表示 |
| size | "sm" | "md" | "md" | 入力欄のサイズ |
| disabled | boolean | false | 無効状態 |
ガイドライン
Do
- ●label を必ず付ける
- ●エラーメッセージは具体的に書く(「13桁の番号を入力してください」)
Don't
- ●placeholder だけで label を省略しない
- ●「入力エラーです」のような汎用エラー文を使わない