メインコンテンツへスキップ
ホーム/コンポーネント/フォームと入力/テキスト入力

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

PropTypeDefaultDescription
value*string入力値
onChange(value: string) => void値変更ハンドラ(イベントではなく値を直接受け取る)
onBlur() => voidフォーカスアウトハンドラ
labelstringラベルテキスト
placeholderstringプレースホルダー
errorstringエラーメッセージ
requiredbooleanfalse必須マーク表示
multilinebooleanfalsetextarea として描画
type"text" | "number" | "email" | ..."text"HTML input type。number はカンマ付き表示
size"sm" | "md""md"入力欄のサイズ
disabledbooleanfalse無効状態

ガイドライン

Do
  • label を必ず付ける
  • エラーメッセージは具体的に書く(「13桁の番号を入力してください」)
Don't
  • placeholder だけで label を省略しない
  • 「入力エラーです」のような汎用エラー文を使わない