Input
1行のテキスト入力フィールド。氏名・メールアドレス・検索キーワードなど、ユーザーが短い情報を入力するときに使う。
インストール
npx shoji add input
プレビュー
Sizes
sm · 36px
md · 44px
lg · 56px
States
メールアドレスの形式が正しくありません
パターン
Search
虫眼鏡アイコン付き検索フィールド。入力後に × で一発クリアできる。ページ内検索・テーブルフィルターで頻出。
inputsearchfilter
Password
目アイコンで表示・非表示を切り替えるパスワード入力。ログイン・新規登録画面の必須パターン。
inputauthpassword
With Prefix / Suffix
「¥」「@」「.co.jp」などの固定アフィックスを持つ入力。金額・URL・ユーザー名入力で使う。
inputcurrencyURL
¥
@
使い方
こんなときに使う
- 氏名・会社名・住所など、1行に収まる情報を入力させるとき
- メールアドレス・電話番号・URL など形式が決まった入力（type 属性で制御）
- 検索ボックス（type="search"）
- パスワード入力（type="password"）
使わないほうがいい場面
- 住所の番地や自己紹介など、複数行になる可能性がある入力（Textarea を使う）
- プレースホルダーをラベル代わりにする（入力開始後にラベルが消えてしまう）
JP 最適化のポイント
- 高さを h-11（44px）に設定 — 日本語 IME 変換候補ウィンドウが重なっても入力中のテキストが見やすい
- leading-relaxed（1.625）を適用 — IME の下線表示（変換前テキスト）が行間に収まり、文字が詰まって見えない
- text-base（16px）固定 — iOS Safari はフォントサイズ 16px 未満の input にフォーカスしたとき自動的にズームインする。これを防ぐ