PackagesUIComponentsForms
Text Inputs
テキスト入力コンポーネント。TextInput は単一行、Textarea は複数行の入力に使用する。
いつ使うか
- ユーザーからテキスト入力を受け付ける場合に使用する
- メールアドレス、パスワード、電話番号など入力タイプに応じて
typeを指定する - 複数行のテキスト入力には
Textareaを使用する
いつ使わないか
- 選択肢から選ばせる場合は
SelectやRadioGroupを使用する - ON/OFF の切り替えには
CheckboxやSwitchを使用する
Usage
import { TextInput, Textarea } from '@bi-shop-it/ui/text-input';
<TextInput placeholder="テキストを入力" />
<Textarea placeholder="詳細を入力" />TextInput
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
type | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'text' | 入力タイプ |
placeholder | string | — | プレースホルダーテキスト |
value | string | — | 入力値（制御モード） |
defaultValue | string | — | 初期値（非制御モード） |
name | string | — | フォームのフィールド名 |
id | string | — | HTML id属性 |
error | boolean | false | エラー状態 |
disabled | boolean | false | 無効化 |
readOnly | boolean | false | 読み取り専用 |
required | boolean | false | 必須入力 |
maxLength | number | — | 最大文字数 |
autoComplete | string | — | オートコンプリートのヒント |
onChange | (event: ChangeEvent<HTMLInputElement>) => void | — | 値変更時のコールバック |
デフォルト
<TextInput placeholder="テキストを入力" />Type バリエーション
type を指定することで、ブラウザのネイティブ入力支援を利用できる。
<TextInput placeholder="メールアドレス" type="email" />
<TextInput placeholder="パスワード" type="password" />
<TextInput placeholder="電話番号" type="tel" />
<TextInput placeholder="数値" type="number" />
<TextInput placeholder="URL" type="url" />Disabled
<TextInput disabled placeholder="無効な入力欄" />Error
<TextInput error placeholder="エラーのある入力欄" />Textarea
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
placeholder | string | — | プレースホルダーテキスト |
value | string | — | 入力値（制御モード） |
defaultValue | string | — | 初期値（非制御モード） |
name | string | — | フォームのフィールド名 |
id | string | — | HTML id属性 |
rows | number | — | 表示行数 |
error | boolean | false | エラー状態 |
disabled | boolean | false | 無効化 |
readOnly | boolean | false | 読み取り専用 |
required | boolean | false | 必須入力 |
maxLength | number | — | 最大文字数 |
onChange | (event: ChangeEvent<HTMLTextAreaElement>) => void | — | 値変更時のコールバック |
デフォルト
<Textarea placeholder="テキストを入力" />Rows 指定
<Textarea placeholder="行数を指定" rows={6} />Disabled
<Textarea disabled placeholder="無効なテキストエリア" />Error
<Textarea error placeholder="エラーのあるテキストエリア" />アクセシビリティ
コンポーネントが内部で処理すること
errorがtrueのときaria-invalidを自動付与し、エラースタイルを適用するdisabled時にフォーカスを受け付けないようにする
利用者が対応すること
FormFieldと組み合わせて使用し、ラベルとエラーメッセージを適切に関連付けることtypeを適切に指定し、ブラウザのネイティブ入力支援を活用すること
関連コンポーネント
FormField— ラベル・説明・エラーメッセージ付きのフォームフィールドラッパーSelect— 選択肢から値を選ぶ場合に使用する