Input

テキスト入力フィールド。様々なタイプ(text、email、password等)に対応。

インストール

import { Input } from "@ginga-ui/core";

基本的な使い方

シンプルなテキスト入力フィールドです。

export function BasicExample() {
  return <Input placeholder="テキストを入力..." />;
}

様々なタイプ

email、password、numberなど様々なタイプの入力フィールドです。

export function TypesExample() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      <Input type="text" placeholder="テキスト" />
      <Input type="email" placeholder="メールアドレス" />
      <Input type="password" placeholder="パスワード" />
      <Input type="number" placeholder="数値" />
    </div>
  );
}

無効化

無効化された入力フィールドです。

export function DisabledExample() {
  return <Input disabled placeholder="無効化された入力フィールド" />;
}

初期値あり

初期値を持つ入力フィールドです。

export function WithValueExample() {
  return <Input defaultValue="初期値が設定されています" />;
}