Labels top aligned by default

labels-top-aligned-by-default

Labels top-aligned by default; left-align only if space is tight and fields are consistent type/width.

Description

Fluent labels are top-aligned by default so each field keeps a lasting name above the control. Left-align labels only if space is tight and fields share consistent type and width. Dual-cite Ant’s left-default without forcing a house winner. Apply when aligning Fluent field labels in forms. Fail left-aligned labels on mixed-type or mixed-width fields, or left as the default when space is not tight.

When to use

Aligning Fluent field labels in forms with mixed or tight layouts.

Not when

Ant left-default label placement — dual-cite, do not force one winner.

Agent hint

Default labels above fields; left-align only if space is tight and widths match.

Pass

Labels sit above fields; left-aligned labels only when space is tight and fields share type/width.

Fail

Left-aligned labels on mixed-type/width fields, or as the default when space is not tight.

Citations

Fluent 2 — Field usage

https://fluent2.microsoft.design/components/web/react/core/field/usage