リスト入力 React コンポーネント

リスト入力コンポーネント
ListInput プロパティ
例

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

リスト入力コンポーネント

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

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

ListInput プロパティ

名前	型	デフォルト	説明
accept	文字列 \| 数値		入力のネイティブ "accept" 属性の値
autoCapitalize	文字列		入力のネイティブ "autocapitalize" 属性の値
autoComplete	文字列		入力のネイティブ "autoComplete" 属性の値
autoCorrect	文字列		入力のネイティブ "autocorrect" 属性の値
autoFocus	真偽値		入力のネイティブ "autofocus" 属性の値
autoSave	文字列		入力のネイティブ "autosave" 属性の値
clearButton	真偽値	false	入力クリアボタンを追加します
colors	オブジェクト		Tailwind CSS カラークラスを持つオブジェクト
colors.bgIos	文字列	''
colors.bgMaterial	文字列	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.errorBorder	文字列	'border-red-500'
colors.errorText	文字列	'text-red-500'
colors.labelTextFocusIos	文字列	''
colors.labelTextFocusMaterial	文字列	'text-md-light-primary dark:text-md-dark-primary'
colors.labelTextIos	文字列	''
colors.labelTextMaterial	文字列	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineBorderFocusIos	文字列	'border-primary'
colors.outlineBorderFocusMaterial	文字列	'border-md-light-primary dark:border-md-dark-primary'
colors.outlineBorderIos	文字列	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.outlineBorderMaterial	文字列	'border-md-light-on-surface dark:border-md-dark-on-surface'
colors.outlineLabelBgIos	文字列	'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.outlineLabelBgMaterial	文字列	'bg-md-light-surface dark:bg-md-dark-surface'
component	文字列	'li'	コンポーネントのHTML要素
defaultValue	任意		非制御コンポーネントの場合の入力値
disabled	真偽値		入力を無効としてマークします
dropdown	真偽値	false	追加のドロップダウンアイコンをレンダリングします（`select` 入力と一緒に使用すると便利です）
error	ReactNode		入力の "エラー" の内容
floatingLabel	真偽値	false	フローティングラベルを作成します
info	ReactNode		入力の "情報" の内容
input	ReactNode		カスタム入力要素
inputClassName	文字列		追加の入力スタイル
inputId	文字列		入力ID属性
inputMode	文字列		入力のネイティブ "inputmode" 属性の値
inputStyle	CSSProperties		追加の入力クラス
label	ReactNode		ラベルの内容
max	文字列 \| 数値		入力のネイティブ "max" 属性の値
maxLength	文字列 \| 数値		入力のネイティブ "maxlength" 属性の値
media	ReactNode		リストアイテムの "メディア" 領域の内容（例：アイコン）
min	文字列 \| 数値		入力のネイティブ "min" 属性の値
minLength	文字列 \| 数値		入力のネイティブ "minlength" 属性の値
multiple	真偽値		入力のネイティブ "multiple" 属性の値
name	文字列		入力名
outline	真偽値	未定義	アウトラインスタイルの入力（周囲に枠線あり）をレンダリングします。 `outlineIos` および `outlineMaterial` を上書きします
outlineIos	真偽値	false	iOSテーマでアウトラインスタイルの入力（周囲に枠線あり）をレンダリングします
outlineMaterial	真偽値	false	マテリアルテーマでアウトラインスタイルの入力（周囲に枠線あり）をレンダリングします
pattern	文字列		入力のネイティブ "pattern" 属性の値
placeholder	文字列 \| 数値		入力プレースホルダー
readOnly	真偽値		入力を読み取り専用としてマークします
required	真偽値		入力を必須としてマークします
size	文字列 \| 数値		入力のネイティブ "size" 属性の値
spellCheck	文字列		入力のネイティブ "spellcheck" 属性の値
step	文字列 \| 数値		入力のネイティブ "step" 属性の値
tabIndex	文字列 \| 数値		入力のネイティブ "tabindex" 属性の値
type	文字列	'text'	入力タイプ
value	任意		入力値
onBlur	function(e)		`blur` イベントハンドラ
onChange	function(e)		`change` イベントハンドラ
onClear	function(e)		`clear` イベントハンドラ
onFocus	function(e)		`focus` イベントハンドラ
onInput	function(e)		`input` イベントハンドラ

例

FormInputs.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  List,
  ListInput,
} from 'konsta/react';

import DemoIcon from '../components/DemoIcon';

export default function FormInputsPage() {
  const [name, setName] = useState({ value: '', changed: false });
  const [demoValue, setDemoValue] = useState('');

  const onNameChange = (e) => {
    setName({ value: e.target.value, changed: true });
  };
  const onDemoValueChange = (e) => {
    setDemoValue(e.target.value);
  };
  const onDemoValueClear = () => {
    setDemoValue('');
  };
  return (
    <Page>
      <Navbar
        title="Form Inputs"
        />

      <BlockTitle>Default</BlockTitle>
      <List strongIos insetIos>
        <ListInput
          label="Name"
          type="text"
          placeholder="Your name"
          media={<DemoIcon />}
        />

        <ListInput
          label="Password"
          type="password"
          placeholder="Your password"
          media={<DemoIcon />}
        />

        <ListInput
          label="E-mail"
          type="email"
          placeholder="Your e-mail"
          media={<DemoIcon />}
        />

        <ListInput
          label="URL"
          type="url"
          placeholder="URL"
          media={<DemoIcon />}
        />

        <ListInput
          label="Phone"
          type="tel"
          placeholder="Your phone number"
          media={<DemoIcon />}
        />

        <ListInput
          label="Gender"
          type="select"
          dropdown
          defaultValue="Male"
          placeholder="Please choose..."
          media={<DemoIcon />}
        >
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </ListInput>

        <ListInput
          label="Birthday"
          type="date"
          defaultValue="2014-04-30"
          placeholder="Please choose..."
          media={<DemoIcon />}
        />

        <ListInput
          label="Date time"
          type="datetime-local"
          placeholder="Please choose..."
          media={<DemoIcon />}
        />

        <ListInput
          label="Textarea"
          type="textarea"
          placeholder="Bio"
          media={<DemoIcon />}
          inputClassName="!h-20 resize-none"
        />
      </List>

      <BlockTitle>Outline</BlockTitle>
      <List strongIos insetIos>
        <ListInput
          outline
          label="Name"
          type="text"
          placeholder="Your name"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="Password"
          type="password"
          placeholder="Your password"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="E-mail"
          type="email"
          placeholder="Your e-mail"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="URL"
          type="url"
          placeholder="URL"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="Phone"
          type="tel"
          placeholder="Your phone number"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="Gender"
          type="select"
          dropdown
          defaultValue="Male"
          placeholder="Please choose..."
          media={<DemoIcon />}
        >
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </ListInput>

        <ListInput
          outline
          label="Birthday"
          type="date"
          defaultValue="2014-04-30"
          placeholder="Please choose..."
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="Date time"
          type="datetime-local"
          placeholder="Please choose..."
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="Textarea"
          type="textarea"
          placeholder="Bio"
          media={<DemoIcon />}
          inputClassName="!h-20 resize-none"
        />
      </List>

      <BlockTitle>Floating Labels</BlockTitle>
      <List strongIos insetIos>
        <ListInput
          label="Name"
          floatingLabel
          type="text"
          placeholder="Your name"
          media={<DemoIcon />}
        />

        <ListInput
          label="Password"
          floatingLabel
          type="password"
          placeholder="Your password"
          media={<DemoIcon />}
        />

        <ListInput
          label="E-mail"
          floatingLabel
          type="email"
          placeholder="Your e-mail"
          media={<DemoIcon />}
        />

        <ListInput
          label="URL"
          floatingLabel
          type="url"
          placeholder="URL"
          media={<DemoIcon />}
        />

        <ListInput
          label="Phone"
          floatingLabel
          type="tel"
          placeholder="Your phone number"
          media={<DemoIcon />}
        />
      </List>

      <BlockTitle>Outline + Floating Labels</BlockTitle>
      <List strongIos insetIos>
        <ListInput
          outline
          label="Name"
          floatingLabel
          type="text"
          placeholder="Your name"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="Password"
          floatingLabel
          type="password"
          placeholder="Your password"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="E-mail"
          floatingLabel
          type="email"
          placeholder="Your e-mail"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="URL"
          floatingLabel
          type="url"
          placeholder="URL"
          media={<DemoIcon />}
        />

        <ListInput
          outline
          label="Phone"
          floatingLabel
          type="tel"
          placeholder="Your phone number"
          media={<DemoIcon />}
        />
      </List>

      <BlockTitle>Validation + Additional Info</BlockTitle>
      <List strongIos insetIos>
        <ListInput
          label="Name"
          type="text"
          placeholder="Your name"
          info="Basic string checking"
          value={name.value}
          error={
            name.changed && !name.value.trim() ? 'Please specify your name' : ''
          }
          media={<DemoIcon />}
          onChange={onNameChange}
        />
      </List>

      <BlockTitle>Clear Button</BlockTitle>
      <List strongIos insetIos>
        <ListInput
          label="TV Show"
          type="text"
          placeholder="Your favorite TV show"
          info="Type something to see clear button"
          value={demoValue}
          clearButton={demoValue.length > 0}
          media={<DemoIcon />}
          onChange={onDemoValueChange}
          onClear={onDemoValueClear}
        />
      </List>

      <BlockTitle>Icon + Input</BlockTitle>
      <List strongIos insetIos>
        <ListInput type="text" placeholder="Your name" media={<DemoIcon />} />

        <ListInput
          type="password"
          placeholder="Your password"
          media={<DemoIcon />}
        />

        <ListInput
          type="email"
          placeholder="Your e-mail"
          media={<DemoIcon />}
        />

        <ListInput type="url" placeholder="URL" media={<DemoIcon />} />
      </List>

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

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

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

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

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

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

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

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

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

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

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

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