Label
フォーム要素に関連するラベル。入力欄の上に配置して、ユーザーが何を入力すべきかを伝える。htmlFor 属性でフォーム要素と紐付ける。
インストール
npx shoji add label
プレビュー
使用例
使い方
こんなときに使う
- Input・Textarea・Select・Checkbox・RadioGroup など、すべてのフォーム要素に付ける
- 必須・任意の区別を明示するとき（ShojiFormField の requiredBadge と組み合わせる）
使わないほうがいい場面
- プレースホルダーのみでラベルを省略する（入力開始後に何を入力すべきか分からなくなる）
- フォーム要素の横や下に配置する（上に配置するのが読み取りやすい）
JP 最適化のポイント
- leading-relaxed（1.625）を適用 — 長いラベルが折り返したときも読みやすい行間を確保
- 日本語のラベルは「〇〇（必須）」より「〇〇」+ 必須バッジの組み合わせのほうが視覚的に整理されやすい