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

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

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

    入力コンポーネント

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

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

    入力のプロパティ

    PropTypeDefaultDescription
    <ListInput> properties
    mediastringリストアイテムのメディアイメージのURL
    labelstring入力のラベルテキスト
    inlineLabelbooleanfalseラベルをインラインで表示します。
    floatingLabelbooleanfalseフローティングラベルを有効にする
    outlinebooleanfalse入力のアウトライン化
    inputbooleantrue入力要素をレンダリングするかどうか。内部でカスタム入力を使用したい場合は無効にします。
    typestring入力タイプ。すべてのデフォルトの HTML5 入力タイプと、いくつかの特別なタイプがあります。
    • textarea - textarea要素をレンダリングします。
    • select - select要素を表示します。
    • datepicker - 入力がフォーカスされたときに カレンダーを開く。
    • colorpicker - 入力にフォーカスしたときに Color Pickerを表示する。
    • texteditor - 入力にフォーカスしたときにテキストエディタを開く
    resizablebooleanfalseテキストエリアのサイズを変更する
    inputStyleobject入力の "style "属性の値(追加のスタイルを渡す必要がある場合に備えて
    clearButtonbooleanfalseクリックすると入力値がクリアされる入力クリアボタンを追加
    validatebooleanfalseこの機能を有効にすると、入力値の変更時に、渡された「パターン」または入力タイプに基づいて検証されます。カスタムバリデーションを使用していて、エラーメッセージの表示/非表示をより細かく制御する必要がある場合には、バリデーションを無効にして、error-messageerror-message-force プロップスを併用するとよいでしょう。
    validateOnBlurbooleanfalse有効にすると、入力はblurのみで検証されます。
    onValidatefunction入力検証時に実行されるコールバックは、入力が有効かどうかを示すブール値を返します。
    <ListInput
      type="email"
      validate
      :onValidate={(isValid) => setInputValid(isValid)}
    />
    errorMessagestring入力値が無効なときに表示するカスタムエラーメッセージ
    errorMessageForcebooleanfalseエラーメッセージを強制的に表示します。カスタムバリデーションを使用していて、必要に応じてエラーメッセージを表示/非表示にしたい場合に便利です。
    infostring入力に関する情報のカスタム追加テキスト
    namestring入力名
    placeholderstring入力のプレースホルダー
    idstring折り返し要素のID属性
    inputIdstring入力要素のID属性
    valuestring
    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の文字列でなければなりません。

    defaultValuestring
    number
    制御されないコンポーネントの場合の入力値
    inputmodestring入力のネイティブな "inputmode "属性の値
    sizestring
    number
    入力に固有の "size "属性の値
    patternstring入力のネイティブな "pattern "属性の値
    acceptstring
    number
    入力のネイティブな "accept "属性の値
    autocompletestring入力のネイティブ "autocomplete "属性の値
    autofocusbooleanfalseValue of the input's native "autofocus" attribute (日本語)
    autosavestring入力固有の "autosave "属性の値
    disabledbooleanfalse入力を無効にする
    maxstring
    number
    入力のネイティブ "max "属性の値
    minstring
    number
    入力のネイティブの "min "属性の値
    stepstring
    number
    入力のネイティブ "step "属性の値
    maxlengthstring
    number
    入力のネイティブ "maxlength "属性の値
    minlengthstring
    number
    input's native "minlength "属性の値
    multiplebooleanfalse入力固有の "multiple "属性の値
    readonlybooleanfalse入力をリードオンリーとしてマークする
    requiredbooleanfalse入力を必須としてマークする
    tabindexstring
    number
    入力のネイティブ "tabindex "属性の値
    noStoreDatabooleanfalseForm Storageで使用する際に、入力値を無視して保存できるようにする。
    ignoreStoreDatabooleanfalse以前と同じ
    wrapbooleantrue有効にすると、<li> 要素で囲まれます。
    calendarParamsobjectカレンダーのパラメータを持つオブジェクトで、type="datepicker"のときに使用されます。
    colorPickerParamsobjecttype="colorpicker"`の場合に使用されるカラーピッカーのパラメーターを持つオブジェクト。
    textEditorParamsobjecttype="texteditor"`の場合に使用されるテキストエディタのパラメータを持つオブジェクト。
    <Input> properties
    outlinebooleanfalse入力をアウトライン化する
    wrapbooleantrue入力を <div class="input"> 要素でラップするかどうかを定義します。
    typestring入力タイプ。すべてのデフォルトの HTML5 入力タイプと、いくつかの特別なタイプがあります。
    • textarea - textarea要素を表示します。
    • select - select要素を表示します。
    • datepicker - 入力がフォーカスされたときに カレンダーを開く。
    • colorpicker - 入力にフォーカスしたときに Color Pickerを表示する。
    • texteditor - 入力にフォーカスしたときにテキストエディタを開く
    resizablebooleanfalseテキストエリアのサイズを変更する
    inputStyleobject入力の "style "属性の値(追加のスタイルを渡す必要がある場合に備えて
    clearButtonbooleanfalseクリックすると入力値がクリアされる入力クリアボタンを追加
    validatebooleanfalseこの機能を有効にすると、入力値の変更時に、渡された「パターン」または入力タイプに基づいて検証されます。カスタムバリデーションを使用していて、エラーメッセージの表示/非表示をより細かく制御する必要がある場合には、バリデーションを無効にして、error-messageerror-message-force プロップスを併用するとよいでしょう。
    validateOnBlurbooleanfalse有効にすると、入力はblurのみで検証されます。
    onValidatefunction入力検証時に実行されるコールバックは、入力が有効かどうかを示すブール値を返します。
    <Input
      type="email"
      validate
      :onValidate={(isValid) => setInputValid(isValid)}
    />
    errorMessagestring入力値が無効なときに表示するカスタムエラーメッセージ
    errorMessageForcebooleanfalseエラーメッセージを強制的に表示します。カスタムバリデーションを使用していて、必要に応じてエラーメッセージを表示/非表示にしたい場合に便利です。
    infostring入力に関する情報のカスタム追加テキスト
    namestring入力名
    placeholderstring入力のプレースホルダー
    idstring折り返し要素のID属性
    inputIdstring入力要素のID属性
    valuestring
    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の文字列でなければなりません。

    defaultValuestring
    number
    制御されないコンポーネントの場合の入力値
    inputmodestring入力のネイティブな "inputmode "属性の値
    sizestring
    number
    入力に固有の "size "属性の値
    patternstring入力のネイティブな "pattern "属性の値
    acceptstring
    number
    入力のネイティブな "accept "属性の値
    autocompletestring入力のネイティブ "autocomplete "属性の値
    autofocusbooleanfalseValue of the input's native "autofocus" attribute (日本語)
    autosavestring入力固有の "autosave "属性の値
    checkedbooleanfalse入力をチェック済みとしてマークする
    disabledbooleanfalse入力を無効にするマーク
    maxstring
    number
    入力のネイティブ "max "属性の値
    minstring
    number
    入力固有の "min "属性の値
    stepstring
    number
    入力固有の "step "属性の値
    maxlengthstring
    number
    入力のネイティブ "maxlength "属性の値
    minlengthstring
    number
    input's native "minlength "属性の値
    multiplebooleanfalse入力固有の "multiple "属性の値
    readonlybooleanfalse入力をリードオンリーとしてマークする
    requiredbooleanfalse入力を必須としてマークする
    tabindexstring
    number
    入力のネイティブ "tabindex "属性の値
    noStoreDatabooleanfalseForm Storageで使用する際に、入力値を無視して保存できるようにする。
    ignoreStoreDatabooleanfalse従来と同じ
    calendarParamsobjectCalendar Parametersを持つオブジェクトで、type="datepicker"のときに使用されます。
    colorPickerParamsobjecttype="colorpicker"`の場合に使用されるカラーピッカーのパラメーターを持つオブジェクト。
    textEditorParamsobjecttype="texteditor"`の場合に使用されるテキストエディタのパラメータを持つオブジェクト。

    入力イベント

    EventArgumentsDescription
    <ListInput>, <Input> events
    focus(event)ユーザーが入力にフォーカスしたときに発生します。
    blur(event)ユーザーが入力にフォーカスしていないときに発生します。
    input(event)入力値が変更されたときに直ちに発生します。注意:入力イベントは、beforeinput、keypress、keyup、keydownイベントの後に発生します。
    change(event)値が変更された場合、blurで発生します。
    inputClear(event)入力のクリアボタンがクリックされたときに発生します。
    textareaResize(event)サイズ変更可能なテキストエリアのサイズが変更された場合に発生します。event.detail には、initialHeightcurrentHeightscrollHeight` プロパティを持つオブジェクトが含まれます。
    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>