入力 / フォーム要素 React コンポーネント

フォーム要素を使用すると、柔軟で美しいフォームレイアウトを作成できます。フォーム要素は、よく知られたリストビュー（リストとリストアイテム React コンポーネント）ですが、いくつかの追加コンポーネントがあります。

Framework7 の入力 / フォーム要素を参照して、外観を確認してください。

入力コンポーネント

次のコンポーネントが含まれています

ListInput - リストアイテム入力要素
Input - 入力要素

入力プロパティ

プロパティ	型	デフォルト	説明
<ListInput> プロパティ
media	文字列		リストアイテムメディア画像のURL
label	文字列		入力のラベルテキスト
floatingLabel	ブール値	false	フローティングラベルを有効にします
outline	ブール値	false	入力にアウトラインを付けます
input	ブール値	true	入力要素をレンダリングするかどうか。カスタム入力を使用する場合は無効にします。
type	文字列		入力の種類。すべてのデフォルトのHTML5入力タイプと、いくつかの特別なタイプ textarea - テキストエリア要素をレンダリングします select - セレクト要素をレンダリングします datepicker - 入力フォーカス時にカレンダーを開きます colorpicker - 入力フォーカス時にカラーピッカーを開きます texteditor - 入力フォーカス時にテキストエディターを開きます
resizable	ブール値	false	テキストエリアをサイズ変更可能にします
inputStyle	オブジェクト		追加のスタイルを渡す必要がある場合の入力の "style" 属性の値
clearButton	ブール値	false	クリック時に入力値をクリアする入力クリアボタンを追加します
validate	ブール値	false	有効にすると、渡された「pattern」に基づいて、または入力タイプに基づいて、変更時に入力値が検証されます。カスタム検証を使用し、エラーメッセージの表示/非表示をより細かく制御する必要がある場合は、検証を無効にして`error-message`と`error-message-force`プロパティを一緒に使用することをお勧めします。
validateOnBlur	ブール値	false	有効にすると、入力はフォーカスが外れたときのみ検証されます。
onValidate	関数		入力検証時に実行されるコールバック。入力が有効かどうかを示すブール値を返します。 `<ListInput type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	文字列		入力値が無効な場合に表示するカスタムエラーメッセージ
errorMessageForce	ブール値	false	強制的にエラーメッセージを表示します。カスタム検証を使用し、必要に応じてエラーメッセージの表示/非表示を切り替えたい場合に役立ちます
info	文字列		入力に関する追加情報を表示するカスタムテキスト
name	文字列		入力名
placeholder	文字列		入力プレースホルダー
id	文字列		ラッピング要素のID属性
inputId	文字列		入力要素のID属性
value	文字列数値		入力値。 `type="datepicker"`の場合、値はカレンダーが受け入れるものとして渡す必要があります。たとえば、日付を含む配列`value={[new Date()]}` `type="colorpicker"`の場合、値はカラーピッカーが受け入れるものとして渡す必要があります。たとえば、カラーを含むオブジェクト`value={{hex: '#ff0000'}}` `type="texteditor"`の場合、値はHTML文字列である必要があります
defaultValue	文字列数値		制御されていないコンポーネントの場合の入力値
inputmode	文字列		入力のネイティブな "inputmode" 属性の値
size	文字列数値		入力のネイティブな "size" 属性の値
pattern	文字列		入力のネイティブな "pattern" 属性の値
accept	文字列数値		入力のネイティブな "accept" 属性の値
autocomplete	文字列		入力のネイティブな "autocomplete" 属性の値
autofocus	ブール値	false	入力のネイティブな "autofocus" 属性の値
autosave	文字列		入力のネイティブな "autosave" 属性の値
disabled	ブール値	false	入力を無効としてマークします
max	文字列数値		入力のネイティブな "max" 属性の値
min	文字列数値		入力のネイティブな "min" 属性の値
step	文字列数値		入力のネイティブな "step" 属性の値
maxlength	文字列数値		入力のネイティブな "maxlength" 属性の値
minlength	文字列数値		入力のネイティブな "minlength" 属性の値
multiple	ブール値	false	入力のネイティブな "multiple" 属性の値
readonly	ブール値	false	入力を読み取り専用としてマークします
required	ブール値	false	入力を必須としてマークします
tabindex	文字列数値		入力のネイティブな "tabindex" 属性の値
noStoreData	ブール値	false	フォームストレージで使用する場合、入力値の保存を無視できます
ignoreStoreData	ブール値	false	上記と同じ
wrap	ブール値	true	有効にすると、`<li>`要素でラップされます
calendarParams	オブジェクト		`type="datepicker"`で使用されるカレンダーパラメーターを含むオブジェクト
colorPickerParams	オブジェクト		`type="colorpicker"`で使用されるカラーピッカーパラメーターを含むオブジェクト
textEditorParams	オブジェクト		`type="texteditor"`で使用されるテキストエディターパラメーターを含むオブジェクト
<Input> プロパティ
outline	ブール値	false	入力にアウトラインを付けます
wrap	ブール値	true	入力を`<div class="input">`要素でラップするかどうかを定義します。
type	文字列		入力の種類。すべてのデフォルトのHTML5入力タイプと、いくつかの特別なタイプ textarea - テキストエリア要素をレンダリングします select - セレクト要素をレンダリングします datepicker - 入力フォーカス時にカレンダーを開きます colorpicker - 入力フォーカス時にカラーピッカーを開きます texteditor - 入力フォーカス時にテキストエディターを開きます
resizable	ブール値	false	テキストエリアをサイズ変更可能にします
inputStyle	オブジェクト		追加のスタイルを渡す必要がある場合の入力の "style" 属性の値
clearButton	ブール値	false	クリック時に入力値をクリアする入力クリアボタンを追加します
validate	ブール値	false	有効にすると、渡された「pattern」に基づいて、または入力タイプに基づいて、変更時に入力値が検証されます。カスタム検証を使用し、エラーメッセージの表示/非表示をより細かく制御する必要がある場合は、検証を無効にして`error-message`と`error-message-force`プロパティを一緒に使用することをお勧めします。
validateOnBlur	ブール値	false	有効にすると、入力はフォーカスが外れたときのみ検証されます。
onValidate	関数		入力検証時に実行されるコールバック。入力が有効かどうかを示すブール値を返します。 `<Input type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	文字列		入力値が無効な場合に表示するカスタムエラーメッセージ
errorMessageForce	ブール値	false	強制的にエラーメッセージを表示します。カスタム検証を使用し、必要に応じてエラーメッセージの表示/非表示を切り替えたい場合に役立ちます
info	文字列		入力に関する追加情報を表示するカスタムテキスト
name	文字列		入力名
placeholder	文字列		入力プレースホルダー
id	文字列		ラッピング要素のID属性
inputId	文字列		入力要素のID属性
value	文字列数値		入力値。 `type="datepicker"`の場合、値はカレンダーが受け入れるものとして渡す必要があります。たとえば、日付を含む配列`value={[new Date()]}` `type="colorpicker"`の場合、値はカラーピッカーが受け入れるものとして渡す必要があります。たとえば、カラーを含むオブジェクト`value={{hex: '#ff0000'}}` `type="texteditor"`の場合、値はHTML文字列である必要があります
defaultValue	文字列数値		制御されていないコンポーネントの場合の入力値
inputmode	文字列		入力のネイティブな "inputmode" 属性の値
size	文字列数値		入力のネイティブな "size" 属性の値
pattern	文字列		入力のネイティブな "pattern" 属性の値
accept	文字列数値		入力のネイティブな "accept" 属性の値
autocomplete	文字列		入力のネイティブな "autocomplete" 属性の値
autofocus	ブール値	false	入力のネイティブな "autofocus" 属性の値
autosave	文字列		入力のネイティブな "autosave" 属性の値
checked	ブール値	false	入力をチェック済みとしてマークします
disabled	ブール値	false	入力を無効としてマークします
max	文字列数値		入力のネイティブな "max" 属性の値
min	文字列数値		入力のネイティブな "min" 属性の値
step	文字列数値		入力のネイティブな "step" 属性の値
maxlength	文字列数値		入力のネイティブな "maxlength" 属性の値
minlength	文字列数値		入力のネイティブな "minlength" 属性の値
multiple	ブール値	false	入力のネイティブな "multiple" 属性の値
readonly	ブール値	false	入力を読み取り専用としてマークします
required	ブール値	false	入力を必須としてマークします
tabindex	文字列数値		入力のネイティブな "tabindex" 属性の値
noStoreData	ブール値	false	フォームストレージで使用する場合、入力値の保存を無視できます
ignoreStoreData	ブール値	false	上記と同じ
calendarParams	オブジェクト		`type="datepicker"`で使用されるカレンダーパラメーターを含むオブジェクト
colorPickerParams	オブジェクト		`type="colorpicker"`で使用されるカラーピッカーパラメーターを含むオブジェクト
textEditorParams	オブジェクト		`type="texteditor"`で使用されるテキストエディターパラメーターを含むオブジェクト

入力イベント

イベント	引数	説明
<ListInput>、<Input> イベント
focus	(event)	ユーザーが入力にフォーカスしたときに発生します。
blur	(event)	ユーザーが入力からフォーカスを外したときに発生します。
input	(event)	入力値が変更された直後に発生します。注：入力イベントは、beforeinput、keypress、keyup、keydownイベントの後にトリガーされます。
change	(event)	値が変更された場合、フォーカスが外れたときに発生します。
inputClear	(event)	入力クリアボタンがクリックされたときに発生します
textareaResize	(event)	サイズ変更可能なテキストエリアのサイズが変更された場合に発生します。`event.detail`には、`initialHeight`、`currentHeight`、`scrollHeight`プロパティを含むオブジェクトが含まれます
inputEmpty	(event)	入力値が空になったときに発生します
inputNotEmpty	(event)	入力値が空ではなくなったときに発生します
calendarChange	(value)	`type="datepicker"`カレンダーの値が変更されたときに発生します。引数として、選択された日付を含む配列を受け取ります。
colorPickerChange	(value)	`type="colorpicker"`カラーピッカーの値が変更されたときに発生します。引数として、カラーピッカーの値を含むオブジェクトを受け取ります。
textEditorChange	(value)	`type="texteditor"`テキストエディターの値が変更されたときに発生します。引数として、テキストエディターの値（HTML文字列）を受け取ります。

入力スロット

<ListInput>には、カスタム要素用の追加スロットがあります

default - type="select"またはtype="textarea"の場合、要素はselectまたはtextareaタグ内に配置されます。
info - 要素は、情報メッセージを含むコンテナに挿入されます
error-message - 要素は、エラーメッセージを含むコンテナに挿入されます
label - 要素は、入力のラベルを含むコンテナに挿入されます
input - 要素は入力要素の代わりに挿入されます（inputプロパティもfalseに設定する必要があります）
root-start - 要素は<li>要素の先頭に挿入されます
root / root-end - 要素は<li>要素の末尾に挿入されます
content-start - 要素は<div class="item-content">要素の先頭に挿入されます
content / content-end - 要素は<div class="item-content">要素の末尾に挿入されます
inner-start - 要素は<div class="item-inner">要素の先頭に挿入されます
inner / inner-end - 要素は<div class="item-inner">要素の末尾に挿入されます
media - 要素は<div class="item-media">要素内に挿入されます

例

inputs.jsx

import React from 'react';
import { Navbar, Page, BlockTitle, List, Icon, ListInput, Range } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Form Inputs" />

    <BlockTitle>Full Layout / Stacked Labels</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Password" type="password" placeholder="Your password" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="URL" type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Phone" type="tel" placeholder="Your phone number" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Gender" type="select" defaultValue="Male" placeholder="Please choose...">
        <Icon icon="demo-list-icon" slot="media" />
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </ListInput>

      <ListInput
        label="Birthday"
        type="date"
        defaultValue="2014-04-30"
        placeholder="Please choose..."
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Date time" type="datetime-local" placeholder="Please choose...">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Range" input={false}>
        <Icon icon="demo-list-icon" slot="media" />
        <Range slot="input" value={50} min={0} max={100} step={1} />
      </ListInput>

      <ListInput label="Textarea" type="textarea" placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Resizable" type="textarea" resizable placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Floating Labels</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Password"
        floatingLabel
        type="password"
        placeholder="Your password"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="E-mail" floatingLabel type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="URL" floatingLabel type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Phone" floatingLabel type="tel" placeholder="Your phone number" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput label="Resizable" floatingLabel type="textarea" resizable placeholder="Bio">
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Floating Labels + Outline Inputs</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput outline label="Name" floatingLabel type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Password"
        floatingLabel
        type="password"
        placeholder="Your password"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="E-mail"
        floatingLabel
        type="email"
        placeholder="Your e-mail"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput outline label="URL" floatingLabel type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Phone"
        floatingLabel
        type="tel"
        placeholder="Your phone number"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
      <ListInput
        outline
        label="Bio"
        floatingLabel
        type="textarea"
        resizable
        placeholder="Bio"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Validation + Additional Info</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput
        label="Name"
        type="text"
        placeholder="Your name"
        info="Default validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Fruit"
        type="text"
        placeholder="Type 'apple' or 'banana'"
        required
        validate
        pattern="apple|banana"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
        <span slot="info">
          Pattern validation (<b>apple|banana</b>)
        </span>
      </ListInput>

      <ListInput
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
        info="Default e-mail validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="URL"
        type="url"
        placeholder="Your URL"
        info="Default URL validation"
        required
        validate
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput
        label="Number"
        type="text"
        placeholder="Enter number"
        info="With custom error message"
        errorMessage="Only numbers please!"
        required
        validate
        pattern="[0-9]*"
        clearButton
      >
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Icon + Input</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="password" placeholder="Your password" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="email" placeholder="Your e-mail" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>

      <ListInput type="url" placeholder="URL" clearButton>
        <Icon icon="demo-list-icon" slot="media" />
      </ListInput>
    </List>

    <BlockTitle>Label + Input</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput label="Name" type="text" placeholder="Your name" clearButton />

      <ListInput label="Password" type="password" placeholder="Your password" clearButton />

      <ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton />

      <ListInput label="URL" type="url" placeholder="URL" clearButton />
    </List>

    <BlockTitle>Only Inputs</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" clearButton />

      <ListInput type="password" placeholder="Your password" clearButton />

      <ListInput type="email" placeholder="Your e-mail" clearButton />

      <ListInput type="url" placeholder="URL" clearButton />
    </List>

    <BlockTitle>Inputs + Additional Info</BlockTitle>
    <List strongIos dividersIos insetIos>
      <ListInput type="text" placeholder="Your name" info="Full name please" clearButton />

      <ListInput
        type="password"
        placeholder="Your password"
        info="8 characters minimum"
        clearButton
      />

      <ListInput
        type="email"
        placeholder="Your e-mail"
        info="Your work e-mail address"
        clearButton
      />

      <ListInput type="url" placeholder="URL" info="Your website URL" clearButton />
    </List>
  </Page>
);

このドキュメントを改善する

このページについて

入力コンポーネント
入力プロパティ
入力イベント
入力スロット
例