入力フィールド

Inputコンポーネントは、様々な入力タイプ、バリデーション状態、サイズを提供する再利用可能なUIコンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• 入力タイプ: text、email、password、number、tel、urlの6種類
• サイズ: Small (sm)、Medium (md)、Large (lg)の3サイズ
• 状態管理: 通常、必須、無効化、エラー状態のサポート
• バリデーション: エラーメッセージとヘルパーテキストの表示
• 数値制限: min、max、step属性による数値入力の制御
• アクセシビリティ: ラベル、エラーメッセージ、キーボードナビゲーション対応
• テーマ対応: ライトテーマとダークテーマの自動切り替え

使用方法

---
import { Input } from '@karan-monorepo/ui-core';
---

<kds-input
  label="メールアドレス"
  placeholder="email@example.com"
  type="email"
  required
  helper="アカウント作成に使用されます"
  theme="light"
></kds-input>

プロパティ

プロパティ	型	デフォルト	説明
type	'text' | 'email' | 'password' | 'number' | 'tel' | 'url'	'text'	入力フィールドのタイプ
placeholder	string	""	プレースホルダーテキスト
value	string	""	入力フィールドの値
label	string	""	ラベルテキスト
size	'sm' | 'md' | 'lg'	'md'	入力フィールドのサイズ
disabled	boolean	false	無効化状態
required	boolean	false	必須フィールド
error	string	""	エラーメッセージ
helper	string	""	ヘルパーテキスト
min	number	undefined	数値入力の最小値
max	number	undefined	数値入力の最大値
step	number	undefined	数値入力のステップ値
theme	'light' | 'dark'	'light'	入力フィールドのカラーテーマ

使用例

Input Component

Flexible input component with various types, states, and validation options.

Input Types

Text

Email

Password

Number

Tel

URL

Sizes

Small

Medium

Large

States

Normal

Disabled

Required

With Error

With Helper

Themes

Light Theme

Dark Theme

Usage Examples

Contact Form

Settings Panel

入力タイプ

Inputコンポーネントは6つの入力タイプをサポートします：

• text: 通常のテキスト入力
• email: メールアドレス入力（ブラウザのバリデーション）
• password: パスワード入力（文字が隠される）
• number: 数値入力（min、max、step属性対応）
• tel: 電話番号入力
• url: URL入力（ブラウザのバリデーション）

<!-- テキスト入力 -->
<kds-input label="名前" placeholder="お名前を入力" type="text" />

<!-- メール入力 -->
<kds-input label="メールアドレス" placeholder="email@example.com" type="email" />

<!-- パスワード入力 -->
<kds-input label="パスワード" placeholder="パスワードを入力" type="password" />

<!-- 数値入力 -->
<kds-input label="年齢" placeholder="25" type="number" min="0" max="120" />

<!-- 電話番号入力 -->
<kds-input label="電話番号" placeholder="090-1234-5678" type="tel" />

<!-- URL入力 -->
<kds-input label="ウェブサイト" placeholder="https://example.com" type="url" />

サイズバリエーション

Inputコンポーネントは3つのサイズをサポートします：

• sm: 小さな入力フィールド（14px）
• md: 標準的な入力フィールド（16px）
• lg: 大きな入力フィールド（18px）

<!-- 小さな入力フィールド -->
<kds-input label="小さい" placeholder="小さいサイズ" size="sm" />

<!-- 標準入力フィールド -->
<kds-input label="標準" placeholder="標準サイズ" size="md" />

<!-- 大きな入力フィールド -->
<kds-input label="大きい" placeholder="大きいサイズ" size="lg" />

状態管理

通常状態

<kds-input label="通常状態" placeholder="通常の入力フィールド" />

必須フィールド

<kds-input label="必須フィールド" placeholder="必須の入力" required />

無効化状態

<kds-input label="無効化" placeholder="無効化されたフィールド" disabled value="無効化された値" />

エラー状態

<kds-input
  label="エラー状態"
  placeholder="エラーの例"
  value="不正な値"
  error="正しい値を入力してください"
/>

ヘルパーテキスト

入力フィールドの下に説明文を表示できます：

<kds-input
  label="パスワード"
  placeholder="パスワードを入力"
  type="password"
  helper="8文字以上の英数字と記号を含むパスワードを入力してください"
/>

数値入力の制御

数値入力では、min、max、step属性を使用して値を制御できます：

<!-- 年齢入力（0-120歳、1歳刻み） -->
<kds-input
  label="年齢"
  placeholder="25"
  type="number"
  min="0"
  max="120"
  step="1"
/>

<!-- 体重入力（0-300kg、0.1kg刻み） -->
<kds-input
  label="体重（kg）"
  placeholder="65.5"
  type="number"
  min="0"
  max="300"
  step="0.1"
/>

フォームでの使用

基本的なフォーム

<form>
  <kds-input
    label="フルネーム"
    placeholder="山田 太郎"
    required
  />

  <kds-input
    label="メールアドレス"
    placeholder="yamada@example.com"
    type="email"
    required
    helper="アカウント作成に使用されます"
  />

  <kds-input
    label="パスワード"
    placeholder="8文字以上のパスワード"
    type="password"
    required
    helper="英数字と記号を含む8文字以上"
  />

  <div class="form-actions">
    <kds-button type="submit" variant="primary">送信</kds-button>
    <kds-button type="button" variant="secondary">キャンセル</kds-button>
  </div>
</form>

バリデーション付きフォーム

<script>
  // バリデーションロジック
  function validateForm() {
    const email = document.querySelector('input[type="email"]').value;
    const password = document.querySelector('input[type="password"]').value;

    // メールバリデーション
    if (!email.includes('@')) {
      // エラー表示
    }

    // パスワードバリデーション
    if (password.length < 8) {
      // エラー表示
    }
  }
</script>

<form onsubmit="validateForm()">
  <kds-input
    label="メールアドレス"
    type="email"
    required
    error=""
  />

  <kds-input
    label="パスワード"
    type="password"
    required
    helper="8文字以上"
    error=""
  />
</form>

スタイリング

Inputコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン
• フォーカス: アクセシブルなフォーカス表示

アクセシビリティ

Inputコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLの<input>要素を使用
• ラベルと入力フィールドの適切な関連付け
• エラーメッセージとヘルパーテキストのARIA属性
• キーボードナビゲーションサポート（Tab、Enter）
• 高コントラスト比による視認性の確保
• スクリーンリーダー対応の構造
• フォーカス表示の適切な管理

ベストプラクティス

1. 適切な入力タイプを選択してユーザーエクスペリエンスを向上させる
2. 説明的なラベルを使用してフィールドの目的を明確にする
3. プレースホルダーは補助的な情報として使用し、ラベルの代わりにしない
4. ヘルパーテキストで追加情報を提供してユーザーをサポートする
5. エラーメッセージは具体的で解決策を含むようにする
6. 必須フィールドは明確に示す（required属性と視覚的インジケーター）
7. 数値入力では適切な制限を設定してデータの品質を保つ
8. 両方のテーマでテストして良好なコントラストと可読性を確保する

使用ケース

ユーザー登録フォーム

<form class="registration-form">
  <kds-input
    label="フルネーム"
    placeholder="山田 太郎"
    required
  />

  <kds-input
    label="メールアドレス"
    placeholder="yamada@example.com"
    type="email"
    required
    helper="アカウント作成に使用されます"
  />

  <kds-input
    label="パスワード"
    placeholder="8文字以上のパスワード"
    type="password"
    required
    helper="英数字と記号を含む8文字以上"
  />

  <kds-input
    label="年齢"
    placeholder="25"
    type="number"
    min="13"
    max="120"
    helper="13歳以上である必要があります"
  />
</form>

設定フォーム

<form class="settings-form">
  <kds-input
    label="ユーザー名"
    placeholder="yamada_taro"
    helper="他のユーザーに表示される名前です"
  />

  <kds-input
    label="ウェブサイト"
    placeholder="https://example.com"
    type="url"
    helper="あなたのウェブサイトのURL"
  />

  <kds-input
    label="電話番号"
    placeholder="090-1234-5678"
    type="tel"
    helper="緊急時の連絡先"
  />
</form>

検索フォーム

<form class="search-form">
  <kds-input
    label="検索キーワード"
    placeholder="商品名やキーワードを入力"
    size="lg"
  />

  <kds-input
    label="価格範囲（最小）"
    placeholder="1000"
    type="number"
    min="0"
    step="100"
  />

  <kds-input
    label="価格範囲（最大）"
    placeholder="10000"
    type="number"
    min="0"
    step="100"
  />
</form>

ブラウザサポート

Inputコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Custom Properties
• Web Components (Lit)
• HTML5 Input Types
• CSS Flexbox
• CSS Grid