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

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

Framework7のInputs / Form Elementsを見てみると、その姿が見えてきます。

入力コンポーネント

以下のコンポーネントが含まれています。

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

入力のプロパティ

Prop	Type	Default	Description
<ListInput> properties
media	string		リストアイテムのメディアイメージのURL
label	string		入力のラベルテキスト
inlineLabel	boolean	false	ラベルをインラインで表示します。
floatingLabel	boolean	false	フローティングラベルを有効にする
outline	boolean	false	入力のアウトライン化
input	boolean	true	入力要素をレンダリングするかどうか。内部でカスタム入力を使用したい場合は無効にします。
type	string		入力タイプ。すべてのデフォルトの HTML5 入力タイプと、いくつかの特別なタイプがあります。 textarea - textarea要素をレンダリングします。 select - select要素を表示します。 datepicker - 入力がフォーカスされたときにカレンダーを開く。 colorpicker - 入力にフォーカスしたときに Color Pickerを表示する。 texteditor - 入力にフォーカスしたときにテキストエディタを開く
resizable	boolean	false	テキストエリアのサイズを変更する
inputStyle	object		入力の "style "属性の値（追加のスタイルを渡す必要がある場合に備えて
clearButton	boolean	false	クリックすると入力値がクリアされる入力クリアボタンを追加
validate	boolean	false	この機能を有効にすると、入力値の変更時に、渡された「パターン」または入力タイプに基づいて検証されます。カスタムバリデーションを使用していて、エラーメッセージの表示/非表示をより細かく制御する必要がある場合には、バリデーションを無効にして、`error-message` と `error-message-force` プロップスを併用するとよいでしょう。
validateOnBlur	boolean	false	有効にすると、入力はblurのみで検証されます。
onValidate	function		入力検証時に実行されるコールバックは、入力が有効かどうかを示すブール値を返します。 `<ListInput type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	string		入力値が無効なときに表示するカスタムエラーメッセージ
errorMessageForce	boolean	false	エラーメッセージを強制的に表示します。カスタムバリデーションを使用していて、必要に応じてエラーメッセージを表示/非表示にしたい場合に便利です。
info	string		入力に関する情報のカスタム追加テキスト
name	string		入力名
placeholder	string		入力のプレースホルダー
id	string		折り返し要素のID属性
inputId	string		入力要素のID属性
value	string number		入力の値。 type="datepicker"`の場合、値は<a href="/docs/calendar.html" target="_blank">Calendar</a>が受け付けるものとして渡さなければなりません - 日付を含む配列、例えば` value={[new Date()]}` のように。 type="colorpicker"`の場合、値は<a href="/docs/color-picker.html" target="_blank">Color Picker</a>が受け付けるものとして渡さなければなりません - 色を表すオブジェクト、たとえば` value={{hex: '#ff0000'}}` です。 type="texteditor"`の場合、値はHTMLの文字列でなければなりません。
defaultValue	string number		制御されないコンポーネントの場合の入力値
inputmode	string		入力のネイティブな "inputmode "属性の値
size	string number		入力に固有の "size "属性の値
pattern	string		入力のネイティブな "pattern "属性の値
accept	string number		入力のネイティブな "accept "属性の値
autocomplete	string		入力のネイティブ "autocomplete "属性の値
autofocus	boolean	false	Value of the input's native "autofocus" attribute (日本語)
autosave	string		入力固有の "autosave "属性の値
disabled	boolean	false	入力を無効にする
max	string number		入力のネイティブ "max "属性の値
min	string number		入力のネイティブの "min "属性の値
step	string number		入力のネイティブ "step "属性の値
maxlength	string number		入力のネイティブ "maxlength "属性の値
minlength	string number		input's native "minlength "属性の値
multiple	boolean	false	入力固有の "multiple "属性の値
readonly	boolean	false	入力をリードオンリーとしてマークする
required	boolean	false	入力を必須としてマークする
tabindex	string number		入力のネイティブ "tabindex "属性の値
noStoreData	boolean	false	Form Storageで使用する際に、入力値を無視して保存できるようにする。
ignoreStoreData	boolean	false	以前と同じ
wrap	boolean	true	有効にすると、`<li>` 要素で囲まれます。
calendarParams	object		カレンダーのパラメータを持つオブジェクトで、`type="datepicker"`のときに使用されます。
colorPickerParams	object		type="colorpicker"`の場合に使用されるカラーピッカーのパラメーターを持つオブジェクト。
textEditorParams	object		type="texteditor"`の場合に使用されるテキストエディタのパラメータを持つオブジェクト。
<Input> properties
outline	boolean	false	入力をアウトライン化する
wrap	boolean	true	入力を `<div class="input">` 要素でラップするかどうかを定義します。
type	string		入力タイプ。すべてのデフォルトの HTML5 入力タイプと、いくつかの特別なタイプがあります。 textarea - textarea要素を表示します。 select - select要素を表示します。 datepicker - 入力がフォーカスされたときにカレンダーを開く。 colorpicker - 入力にフォーカスしたときに Color Pickerを表示する。 texteditor - 入力にフォーカスしたときにテキストエディタを開く
resizable	boolean	false	テキストエリアのサイズを変更する
inputStyle	object		入力の "style "属性の値（追加のスタイルを渡す必要がある場合に備えて
clearButton	boolean	false	クリックすると入力値がクリアされる入力クリアボタンを追加
validate	boolean	false	この機能を有効にすると、入力値の変更時に、渡された「パターン」または入力タイプに基づいて検証されます。カスタムバリデーションを使用していて、エラーメッセージの表示/非表示をより細かく制御する必要がある場合には、バリデーションを無効にして、`error-message` と `error-message-force` プロップスを併用するとよいでしょう。
validateOnBlur	boolean	false	有効にすると、入力はblurのみで検証されます。
onValidate	function		入力検証時に実行されるコールバックは、入力が有効かどうかを示すブール値を返します。 `<Input type="email" validate :onValidate={(isValid) => setInputValid(isValid)} />`
errorMessage	string		入力値が無効なときに表示するカスタムエラーメッセージ
errorMessageForce	boolean	false	エラーメッセージを強制的に表示します。カスタムバリデーションを使用していて、必要に応じてエラーメッセージを表示/非表示にしたい場合に便利です。
info	string		入力に関する情報のカスタム追加テキスト
name	string		入力名
placeholder	string		入力のプレースホルダー
id	string		折り返し要素のID属性
inputId	string		入力要素のID属性
value	string number		入力の値。 type="datepicker"`の場合、値は<a href="/docs/calendar.html" target="_blank">Calendar</a>が受け付けるものとして渡さなければなりません - 日付を含む配列、例えば` value={[new Date()]}` のように。 type="colorpicker"`の場合、値は<a href="/docs/color-picker.html" target="_blank">Color Picker</a>が受け付けるものとして渡さなければなりません - 色を表すオブジェクト、たとえば` value={{hex: '#ff0000'}}` です。 type="texteditor"`の場合、値はHTMLの文字列でなければなりません。
defaultValue	string number		制御されないコンポーネントの場合の入力値
inputmode	string		入力のネイティブな "inputmode "属性の値
size	string number		入力に固有の "size "属性の値
pattern	string		入力のネイティブな "pattern "属性の値
accept	string number		入力のネイティブな "accept "属性の値
autocomplete	string		入力のネイティブ "autocomplete "属性の値
autofocus	boolean	false	Value of the input's native "autofocus" attribute (日本語)
autosave	string		入力固有の "autosave "属性の値
checked	boolean	false	入力をチェック済みとしてマークする
disabled	boolean	false	入力を無効にするマーク
max	string number		入力のネイティブ "max "属性の値
min	string number		入力固有の "min "属性の値
step	string number		入力固有の "step "属性の値
maxlength	string number		入力のネイティブ "maxlength "属性の値
minlength	string number		input's native "minlength "属性の値
multiple	boolean	false	入力固有の "multiple "属性の値
readonly	boolean	false	入力をリードオンリーとしてマークする
required	boolean	false	入力を必須としてマークする
tabindex	string number		入力のネイティブ "tabindex "属性の値
noStoreData	boolean	false	Form Storageで使用する際に、入力値を無視して保存できるようにする。
ignoreStoreData	boolean	false	従来と同じ
calendarParams	object		Calendar Parametersを持つオブジェクトで、`type="datepicker"`のときに使用されます。
colorPickerParams	object		type="colorpicker"`の場合に使用されるカラーピッカーのパラメーターを持つオブジェクト。
textEditorParams	object		type="texteditor"`の場合に使用されるテキストエディタのパラメータを持つオブジェクト。

入力イベント

Event	Arguments	Description
<ListInput>, <Input> events
focus	(event)	ユーザーが入力にフォーカスしたときに発生します。
blur	(event)	ユーザーが入力にフォーカスしていないときに発生します。
input	(event)	入力値が変更されたときに直ちに発生します。注意：入力イベントは、beforeinput、keypress、keyup、keydownイベントの後に発生します。
change	(event)	値が変更された場合、blurで発生します。
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 -
` 要素の先頭に挿入されます。
inner / inner-end - 要素は、
` 要素の最後に挿入されます。
media -
` 要素の内部に挿入されます。

Examples

フルレイアウト・インラインラベル

<List inlineLabels noHairlinesMd>
  <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>

フルレイアウト / スタックラベル

<List noHairlinesMd>
  <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>

日付ピッカー

<List noHairlinesMd>
  <ListInput
    label="Default setup"
    type="datepicker"
    placeholder="Your birth date"
    readonly
  />
  <ListInput
    label="Custom date format"
    type="datepicker"
    placeholder="Select date"
    readonly
    calendarParams={{dateFormat: 'DD, MM dd, yyyy'}}
  />
  <ListInput
    label="Multiple Values"
    type="datepicker"
    placeholder="Select multiple dates"
    readonly
    calendarParams={{ dateFormat: 'M dd yyyy', multiple: true }}
  />
  <ListInput
    label="Range Picker"
    type="datepicker"
    placeholder="Select date range"
    readonly
    calendarParams={{ dateFormat: 'M dd yyyy', rangePicker: true }}
  />
  <ListInput
    label="Open in Modal"
    type="datepicker"
    placeholder="Select date"
    readonly
    calendarParams={{openIn: 'customModal', header: true, footer: true, dateFormat: 'MM dd yyyy'}}
  />
</List>

カラーピッカー

<List noHairlinesMd>
  <ListInput
    type="colorpicker"
    label="Color Wheel"
    placeholder="Color"
    readonly
    value={{ hex: '#00ff00' }}
  />
  <ListInput
    type="colorpicker"
    label="Saturation-Brightness Spectrum"
    placeholder="Color"
    readonly
    value={{ hex: '#ff0000' }}
    colorPickerParams={{
      modules: ['sb-spectrum', 'hue-slider'],
    }}
  />
  <ListInput
    type="colorpicker"
    label="RGB Sliders"
    placeholder="Color"
    readonly
    value={{ hex: '#0000ff' }}
    colorPickerParams={{
      modules: ['rgb-sliders'],
      sliderValue: true,
      sliderLabel: true,
    }}
  />
  <ListInput
    type="colorpicker"
    label="RGBA Sliders"
    placeholder="Color"
    readonly
    value={{ hex: '#ff00ff' }}
    colorPickerParams={{
      modules: ['rgb-sliders', 'alpha-slider'],
      sliderValue: true,
      sliderLabel: true,
      formatValue(value) {
        return `rgba(${value.rgba.join(', ')})`;
      },
    }}
  />
  <ListInput
    type="colorpicker"
    label="HSB Sliders"
    placeholder="Color"
    readonly
    value={{ hex: '#00ff00' }}
    colorPickerParams={{
      modules: ['hsb-sliders'],
      sliderValue: true,
      sliderLabel: true,
      formatValue(value) {
        return `hsb(${value.hsb[0]}, ${value.hsb[1] * 1000 / 10}%, ${value.hsb[2] * 1000 / 10}%)`
      },
    }}
  />
  <ListInput
    type="colorpicker"
    label="RGB Bars"
    placeholder="Color"
    readonly
    value={{ hex: '#0000ff' }}
    colorPickerParams={{
      modules: ['rgb-bars'],
      openIn: 'auto',
      barValue: true,
      barLabel: true,
      formatValue(value) {
        return `rgb(${value.rgb.join(', ')})`;
      },
    }}
  />
  <ListInput
    type="colorpicker"
    label="RGB Sliders + Colors"
    placeholder="Color"
    readonly
    value={{ hex: '#ffff00' }}
    colorPickerParams={{
      modules: ['initial-current-colors', 'rgb-sliders'],
      sliderValue: true,
      sliderLabel: true,
      formatValue(value) {
        return `rgb(${value.rgb.join(', ')})`;
      },
    }}
  />
  <ListInput
    type="colorpicker"
    label="Palette"
    placeholder="Color"
    readonly
    value={{ hex: '#FFEBEE' }}
    colorPickerParams={{
      modules: ['palette'],
      openIn: 'auto',
      openInPhone: 'sheet',
      palette: [
        ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
        ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
        ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
        ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
        ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
        ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
        ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
        ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
      ],
      formatValue(value) {
        return value.hex;
      },
    }}
  />
  <ListInput
    type="colorpicker"
    label="Pro Mode"
    placeholder="Color"
    readonly
    value={{ hex: '#00ffff' }}
    colorPickerParams={{
      modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
      openIn: 'auto',
      sliderValue: true,
      sliderValueEditable: true,
      sliderLabel: true,
      hexLabel: true,
      hexValueEditable: true,
      groupedModules: true,
      palette: [
        ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
        ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
        ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
        ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
        ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
        ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
        ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
        ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
      ],
      formatValue(value) {
        return `rgba(${value.rgba.join(', ')})`;
      },
    }}
  />
</List>

フローティングラベル

<List noHairlinesMd>
  <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>

フローティングラベル＋アウトライン入力

<List noHairlinesMd>
  <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>

バリデーション＋追加情報

<List noHairlinesMd>
  <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>

アイコンと入力

<List noHairlinesMd>
  <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>

ラベル＋入力

<List noHairlinesMd>
  <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>

入力のみ

<List noHairlinesMd>
  <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>

入力＋付加情報

<List noHairlinesMd>
  <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>

インプットのみインセット

<List inset>
  <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>