Balance Form Labels Above Inputs

Why Form Labels Benefit from balance

Field labels like "How would you describe your role at the company?" sit above their input. When the input is, say, 240px wide, a default-wrapped label might stretch to 300px (overlapping siblings) or wrap with an awkward orphan.

The Setup

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

By constraining the label to max-width: 100% (matching the input's width) and applying balance, the label will wrap into 2 or 3 evenly-sized lines that visually align with the input below.

Helper text below inputs

Helper text and error messages benefit even more from balance because they're often a sentence long:

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

Don't balance very long labels

Some forms (notably accessibility audits, healthcare intake) have labels that are full questions: "Have you, in the last 12 months, traveled to a region where yellow fever is endemic?". These exceed 6 wrapped lines on narrow inputs and balance silently disables. For those, switch to text-wrap: pretty so the trailing lines are at least optimized.

Combine with a sensible label width strategy

The best form designs cap labels at a readable measure (about 60-70 characters) regardless of input width. Use max-width: 30ch on labels to enforce this:

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

This decouples label width from input width, which often produces a cleaner visual hierarchy.