7onicDESIGN SYSTEM

Input

Inputは、ユーザーからテキストデータを収集するための基本的なフォーム要素です。メール、パスワード、検索など、様々な種類のテキスト入力に対応します。

2
Variants
5
Sizes
2
Icon Slot
Field
Field

Playground

プレビュー
defaultD
Variant
Size
Radius
Icon
State
Field
Focus
<Input placeholder="Type here..." />

Variants

Default
標準的なボーダースタイル。フォームの一般的な入力欄に使用。
一般的なフォーム
Filled
背景色付きスタイル。視覚的に目立たせたい入力欄に。
検索バー、主要入力

Sizes

xs
高さ36px
横パディング12px
フォント13px
アイコン14px
sm
高さ40px
横パディング12px
フォント14px
アイコン14px
default
高さ44px
横パディング16px
フォント16px
アイコン16px
lg
高さ48px
横パディング16px
フォント16px
アイコン16px
xl
高さ56px
横パディング16px
フォント16px
アイコン16px

タッチターゲット: WCAG 2.5.8基準では最小24pxのタッチ領域が必要です。最小のxs（36px）でもWCAG基準を満たしています。

iOS Safari対応: フォントサイズ16px以上でiOS Safariの自動ズームを防止できます。default以上のサイズは16pxフォント・16pxアイコンを使用しています。

Features

With Icons

<Input leftIcon={<Search />} placeholder="検索..." />
<Input rightIcon={<Mail />} placeholder="メールアドレス" />
<Input leftIcon={<Lock />} rightIcon={<Eye />} type="password" placeholder="パスワード" />

States

Default通常

0/50

Errorエラー
Disabled無効

フォーカス状態

focusRing: false（デフォルト）: クリック時はボーダー変化のみ、キーボードTab時はフォーカスリング自動表示。focusRing: true: 常にフォーカスリングを表示。

API

Props

variant"default"
"default" | "filled"

インプットの視覚スタイル

size"default"
"xs" | "sm" | "default" | "lg" | "xl"

インプットの高さ (36/40/44/48/56px) - Input専用スケール

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

角丸のサイズ (6px)

leftIconundefined
ReactNode

左側アイコン

rightIconundefined
ReactNode

右側アイコン

focusRingfalse
boolean

カスタムフォーカスリング表示。falseでもキーボード操作時は自動表示

errorundefined
boolean

エラー状態（赤いボーダー）

disabledundefined
boolean

無効状態

placeholderundefined
string

プレースホルダーテキスト

typeundefined
string

インプットタイプ (text, email, password, etc.)。HTMLデフォルト: text

Field

errorfalse
boolean

エラー状態。Field.Error と Input に自動伝播

disabledfalse
boolean

無効状態。Field.Label と Input に自動伝播

gap"default"
"none" | "xs" | "sm" | "default" | "lg"

子要素間の間隔 (0 / 4 / 6 / 8 / 12px)

Field.Label

requiredfalse
boolean

必須マーク（*）をラベル末尾に表示

Anatomy

1
2
Email address
4
3
user@example.com
5
6
Please enter a valid email address
1
Field
Field ラッパー
2
Label
ラベル
3
Input Area
テキスト入力
4
Left Icon
左アイコン（任意）
5
Right Icon
右アイコン（任意）
6
Helper Text
補助テキスト（任意）

Best Practices

✓

推奨

  • ✓ラベルを必ず付ける（または aria-label）
  • ✓適切なinput typeを使用（email, tel等）
  • ✓エラー時は明確なフィードバックを表示
  • ✓十分なタッチ領域を確保（WCAG 2.5.8: 24px以上）
✕

避けるべき

  • ✗プレースホルダーをラベル代わりにしない
  • ✗不要なautocompleteをオフにしない
  • ✗エラー表示が色のみにならないようにする
  • ✗入力制限を設ける場合は事前に明示する

Accessibility

キーボード操作

Tabフォーカス移動
Enterフォーム送信
Esc入力キャンセル

WCAG 2.2 準拠

  • フォーカスインジケーター
  • aria-invalid（エラー時）
  • autocomplete サポート
  • コントラスト比 4.5:1 以上