ビュー
フォーム
Input

Input

Inputコンポーネントは、入力フィールドを作成するためのコンポーネントです。テキスト、URL、Eメール、パスワード、数値に対応しています。

基本的な使い方

import { useCallback } from "react";
import { Flexbox, Box, Form, Button, Input } from "@basemachina/view";
 
const App = () => {
  const handleSubmit = useCallback((values) => {
    console.log(values);
  }, []);
 
  return (
    <Form
      initialValues={{
        id: "user123",
        email: "user123@example.com",
        initialPoint: "50",
      }}
      onSubmit={handleSubmit}
    >
      <Flexbox direction="col">
        <Box>
          <Input
            label="ユーザーID"
            type="text"
            name="id"
            required
            minLength="5"
            maxLength="10"
            pattern="\w+"
          />
        </Box>
        <Box>
          <Input label="メールアドレス" type="email" name="email" required />
        </Box>
        <Box>
          <Input
            label="初期ポイント"
            type="number"
            name="initialPoint"
            min="0"
            max="100"
          />
        </Box>
        <Button type="submit" title="登録" color="blue" />
      </Flexbox>
    </Form>
  );
};
 
export default App;
使用例

詳細なインターフェース

名前説明デフォルト値
name入力フィールドの名前を指定します。必須
label入力フィールドのラベルを指定します。任意
type入力フィールドの種類を指定します。text、url、email、password、numberのいずれかを指定します。text
required入力が必須かどうかを指定します。trueの場合、入力が必須になります。false

typeがtext、url、email、passwordの場合、さらに以下のプロパティを指定できます。

名前説明デフォルト値
maxLength入力可能な最大文字数を指定します。任意
minLength入力が必要な最小文字数を指定します。任意
pattern入力値が一致する必要のある正規表現のパターンを指定します。任意

プロパティの詳細な仕様については以下のドキュメントを参照してください。

typeがnumberの場合、さらに以下のプロパティを指定できます。

名前説明デフォルト値
max入力の最大値を指定します。任意
min入力の最小値を指定します。任意

プロパティの詳細な仕様については以下のドキュメントを参照してください。

FileInputLink