Password Input
パスワードや API シークレットなどの機密情報を伏せ字 (●●●) で安全に入力するためのフィールド。表示/非表示はチェックボックスで切り替える。
プレビュー(動作デモ)
チェックボックスを切り替えると、フィールドのパスワードが ●●● ⇔ 平文に切り替わります。
パスワード
チェックを ON にするとフィールド内のパスワードが平文表示、OFF で ●●● に戻ります。
API シークレット
チェックボックスのラベルは toggleLabel で差し替え可能。
ログイン失敗例
ID又はパスワードが正しくありません。
状態
Normal
パスワード
Focus
パスワード
Error
パスワード
パスワードが一致しません
Disabled
パスワード
実装例
import { PasswordInput } from "@/components/PasswordInput";
<PasswordInput label="パスワード" />仕様
構造
- 上から: 任意の label / 入力フィールド / エラーメッセージ (エラー時のみ) / 表示切替チェックボックス
- 幅 480px (固定)
- 入力フィールド: 高さ 40px、padding 8px 12px、radius 4px (Input と共通)
- フォントは regular (400)。placeholder も同じく regular (400)
動作
- チェック OFF:
type="password"でブラウザネイティブの伏字 (●●●) - チェック ON:
type="text"に切り替わり平文表示 - 切り替えても入力値は保持されたまま (DOM 上の value は変わらない)
- autocomplete デフォルト
current-password。autoCompleteプロップで差し替え可
エラー
errorで赤枠 +aria-invalid="true"errorMessageを渡すと 入力フィールドの下 に 12px medium / status-danger カラーで表示 (Figma 仕様)
利用基準
使うべき時
- ログイン / 再認証パスワードの入力
- 外部サービス連携用の API キー / シークレットの保存
- 管理者権限変更など機密性の高い設定の認証
- エラー時はポリシー (文字数・形式) を含む具体的なメッセージを示す
使わない時
- 電話番号・メールアドレス・住所など一般属性 → Text Field を使用
- OTP など短い専用入力 → 専用の OTP Input を検討
- 公開して問題ない値 (ユーザー名等) → Text Field を使用