Home/Components/Form & Input/Text Input

FormInput

テキスト入力コンポーネント。label / error / multiline / type=number（カンマ付き）/ size をサポート。onChange は (value: string) => void 形式。

import { FormInput } from "@blueai/ui"

Examples

Basic

会社名

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

<FormInput
  label="会社名"
  value={value}
  onChange={setValue}
  placeholder="会社名を入力"
/>

With Error

登録番号

13桁の番号を入力してください

<FormInput
  label="登録番号"
  value="T123"
  onChange={setValue}
  error="13桁の番号を入力してください"
/>

Number (with comma formatting)

金額

内部値: 1000

<FormInput
  label="金額"
  type="number"
  value={numValue}
  onChange={setNumValue}
/>
// 内部値は常にカンマなし文字列: "1000"

Multiline

備考

<FormInput
  label="備考"
  multiline
  value={multiline}
  onChange={setMultiline}
/>

Sizes

Small

Medium

<FormInput size="sm" label="Small" ... />
<FormInput size="md" label="Medium" ... />

Disabled

無効

<FormInput label="無効" value="変更不可" disabled />

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	無効状態

Don't