React Native TextInputのプロパティ：検索できる一覧

React Native TextInputのプロパティリファレンス

React Native TextInput：検索できるプロパティリファレンス | We.Inc

よく使うTextInputのプロパティをすべて、検索できる1つの表にまとめました。複数行のテキストエリア、keyboardType、secureTextEntry、autoComplete、returnKeyType、submitBehaviorなど。

TextInputは、文字入力のためのReact Nativeのコアコンポーネントです。値はステートに保持し、新しい文字列を渡してくれるonChangeTextで更新します。テキストエリアにするには、multilineをtrueにし、textAlignVertical: "top" を加えてAndroidの表示をiOSに合わせます。keyboardType、autoComplete、secureTextEntryで、キーボードの種類、自動入力のヒント、パスワードのマスクを指定します。

よくある入力欄向けのTextInputのプロパティ

• 入力欄
• プロパティ

• メールアドレス
• keyboardType="email-address" autoComplete="email" autoCapitalize="none"

• パスワード
• secureTextEntry autoComplete="password" textContentType="password"

• テキストエリア
• multiline numberOfLines={4} textAlignVertical="top"

• 価格
• keyboardType="decimal-pad"

• ワンタイムコード
• keyboardType="number-pad" autoComplete="one-time-code" maxLength={6}

公式リファレンスはアルファベット順の長いリストです。このページでは、よく検索されるプロパティを実際の値やデフォルトとともに残し、名前、値、プラットフォームで絞り込める表にしました。ボックスに multiline、password、android などと入力して絞り込んでください。

• フィルターボックスに語句を入力します。プロパティの名前、decimal-pad のような値、または対応プラットフォームです。
• どこかが一致した行が表示されたまま残り、ボックスの下の件数で何件かがわかります。
• プロパティを設定する前にデフォルト列を確認しましょう。意外なデフォルトがいくつかあります。
• 表の下の例から、テキストエリア、メールアドレス欄、次の入力欄への移動の例をコピーできます。

• autoCapitalize のデフォルトは sentences なので、メールアドレスやユーザー名の欄では none に設定しましょう。
• secureTextEntry は複数行入力（multiline）と併用できません。パスワード欄は1行のままにする必要があります。
• 両方を設定すると inputMode が keyboardType より優先されるので、どちらか一方を選びましょう。
• maxLength は上限で入力を止めるので、onChangeText で自分で文字列を切り詰めたときのちらつきを避けられます。
• Androidではデフォルトで下線が描画されます。underlineColorAndroid="transparent" で消せます。

よくある質問

React Nativeでテキストエリアを作るには？

専用のテキストエリアコンポーネントはありません。multilineをtrueにしたTextInputを使い、高さかnumberOfLinesを指定し、textAlignVertical: "top" を加えて、AndroidでもiOSと同じように1行目が上から始まるようにします。

Returnキーで送信されずに改行されるのはなぜですか？

複数行の入力欄では submitBehavior のデフォルトが "newline" です。ReturnでonSubmitEditingを発火させたい場合は "submit" か "blurAndSubmit" に設定します。1行の入力欄のデフォルトは "blurAndSubmit" です。

blurOnSubmit の後継は何ですか？

submitBehavior です。ドキュメントでは blurOnSubmit は非推奨とされ、両方ある場合は submitBehavior が優先されます。

両方のプラットフォームで使える keyboardType の値は？

default、number-pad、decimal-pad、numeric、email-address、phone-pad、url です。iOSの twitter や web-search、Androidの visible-password などは、片方のプラットフォームでしか使えません。

制御コンポーネントか非制御コンポーネントか

• 多くの画面では value と onChangeText を渡すので、ステートが常に画面上の内容を保持し、検証や整形ができます。defaultValue はキー入力を逐一追跡せずに初期文字列を与えるもので、送信時に一度だけ読む入力欄に向いています。
• フォーカスを移動したいときは参照（ref）を使います。onSubmitEditing の中で次の入力欄の参照の focus() を呼べば、Returnを押してフォームの下へ進む、おなじみの動作になります。

キーボードと自動入力

• keyboardType は表示されるキーを変えるだけで、入力内容を検証することはありません。decimal-pad の入力欄にも文字が貼り付けられることがあるので、保存前に文字列を確認しましょう。
• autoComplete はシステムの自動入力に向けたクロスプラットフォームのヒントで、textContentType はiOS専用のヒントです。ログイン欄で両方を設定すると、どちらのプラットフォームでも保存済みパスワードやメッセージで届いたワンタイムコードが自動入力されます。

TextInputの例

複数行のテキストエリア

textAlignVertical でAndroidでもカーソルが上に保たれ、文字数はステートから直接読み取ります。

次の入力欄にフォーカスを移すメールアドレス欄

returnKeyType="next" でキーのラベルを設定し、onSubmitEditing で参照（ref）を通じてパスワード欄にフォーカスします。

プロパティを絞り込む

プロパティ、値、プラットフォームで絞り込み

{v} 件中 {n} 件のプロパティを表示

その条件に一致するプロパティはありません。

TextInputのプロパティ、値、デフォルト

• プロパティ
• 値または型
• デフォルト
• プラットフォーム
• 働き

• value / onChangeText
• string / (text) => void
• 両方
• 制御されたテキストと、新しい文字列を受け取るコールバック

• defaultValue
• 両方
• 値を制御しない場合の初期テキスト

• 両方
• 入力欄が空のときに表示されるヒント

• placeholderTextColor
• 両方
• プレースホルダーテキストの色

• 両方
• 複数行を許可します。React Nativeのテキストエリアです

• numberOfLines
• 両方
• 表示する最大行数。iOSではNew Architectureのみ

• keyboardType
• default, number-pad, decimal-pad, numeric, email-address, phone-pad, url
• 両方
• どのキーボードを開くか

• keyboardType (iOS)
• ascii-capable, numbers-and-punctuation, name-phone-pad, twitter, web-search
• iOS
• iOSだけにある追加のキーボード

• keyboardType (Android)
• Android
• 予測変換のないキーボード

• inputMode
• none, text, decimal, numeric, tel, search, email, url
• 両方
• HTMLの inputmode 属性に相当し、keyboardType より優先されます

• secureTextEntry
• 両方
• テキストをマスクします。複数行とは併用できません

• autoComplete
• email, password, username, new-password, one-time-code, off など
• 両方
• システム向けの自動入力ヒント。off で無効になります

• textContentType
• password, newPassword, oneTimeCode, emailAddress, username, none など
• iOS
• キーチェーンやコードの自動入力のため、入力欄の内容をiOSに伝えます

• passwordRules
• iOS
• textContentType が newPassword のときに生成されるパスワードの要件

• autoCapitalize
• characters, words, sentences, none
• 両方
• どの文字を自動で大文字にするか

• autoCorrect
• 両方
• 自動修正のオンとオフを切り替えます

• maxLength
• 両方
• この文字数で入力を止めます

• 両方
• false で入力欄が読み取り専用になります

• readOnly
• 両方
• true で入力欄が読み取り専用になります。editable の代わりになります

• returnKeyType
• done, go, next, search, send
• 両方
• Returnキーのラベル。プラットフォームごとに他の値もあります

• onSubmitEditing
• ({nativeEvent}) => void
• 両方
• 送信キーが押されたときに実行されます。iOSの phone-pad では呼ばれません

• submitBehavior
• submit, blurAndSubmit, newline
• blurAndSubmit（1行）、newline（複数行）
• 両方
• Returnの動作。blurOnSubmit の後継です

• blurOnSubmit
• 両方
• 非推奨。submitBehavior を使います

• underlineColorAndroid
• Android
• デフォルトの下線の色。transparent で非表示になります

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

• Reactのmemo、useMemo、useCallbackの使い分けとref
• React Routerのコード例（v7）
• React Server Componentsをわかりやすく解説
• TanStack TableによるReactデータテーブルのサンプル集
• React + TypeScript：本当に必要な型だけをまとめて解説
• React UIライブラリ比較：shadcn/ui、Radix、daisyUI、MUIほか
• React と React Native の違い：同じ考え方、異なる部品
• 正規表現チートシート

製品

• AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
• ホワイトラベル プラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
• エンタープライズ：SSO、個別の SLA、専任サポート
• 開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

• 制作会社・代理店向け：自社ブランドで再販
• フリーランス向け：自分ブランドのビルダーを持つ
• ホスティング事業者向け：サービスにビルダーを追加
• SaaS プラットフォーム向け：API でサイト作成を組み込み
• スタートアップ向け
• 金融サービス向け
• 医療・ヘルスケア向け

機能

• ドラッグ＆ドロップエディター
• SEO ツール内蔵
• 独自ブランディング
• クライアント用ダッシュボード
• 再販向け請求管理（Stripe Connect）

リソース

• ブログ
• ヘルプセンター
• 無料ビジネスツール
• ホームページ テンプレート
• テンプレート集
• サイト事例
• ガイド
• 比較
• 代替サービス
• おすすめ
• レビュー
• 料金ガイド
• 用語集・ガイド
• 連携サービス
• 開発者向け
• ベンチマーク
• Windows アプリ

会社情報

• 会社概要
• 料金
• パートナープログラムに申し込む
• お問い合わせ
• 採用情報
• セキュリティ
• プライバシーポリシー
• 利用規約

サイトマップを見る