入力フィールド上のフォームラベルをバランス調整

フォームラベルが balance の恩恵を受ける理由

「会社でのあなたの役割をどう表現しますか？」のようなフィールドラベルは入力欄の上に表示されます。入力欄が240px だとして、デフォルトの折り返しでは300px に伸びて隣の要素と重なったり、不格好なオーファンができたりします。

セットアップ

.field-label {
  display: block;
  text-wrap: balance;
  max-width: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

ラベルに max-width: 100%（入力欄の幅と一致）と balance を組み合わせると、ラベルは2〜3行の均等なサイズに折り返り、下の入力欄と視覚的に揃います。

入力欄下のヘルパーテキスト

ヘルパーテキストやエラーメッセージはたいてい一文くらいの長さなので、balance の効果が一層大きくなります：

.field-helper {
  text-wrap: balance;
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: 100%;
  margin-top: 0.25rem;
}

非常に長いラベルには balance を使わない

一部のフォーム（特にアクセシビリティ監査、医療問診）では、ラベル自体が完全な質問文です：「過去12ヶ月以内に、黄熱病が常在する地域へ渡航しましたか？」。狭い入力欄では6行を超え、balance が静かに無効化されます。そういう場合は text-wrap: pretty に切り替えて、最終行だけでも最適化されるようにしてください。

合理的なラベル幅戦略と組み合わせる

最良のフォームデザインは入力欄幅に関わらずラベルを読みやすい幅（60〜70文字程度）に制限します。max-width: 30ch でラベル側に上限を設けます：

.field-label {
  text-wrap: balance;
  max-width: 30ch;
}

これでラベル幅が入力幅から切り離され、視覚的階層がすっきりします。