Change the Form Display Density

In Lightning Experience, the display density setting determines how densely content is displayed and where field labels are located. Display density is controlled for the org in Setup, and users can also set display density to their liking from their profile menu.

An org’s comfy setting places the labels on the top of fields and adds more space between page elements. Contrastingly, compact is a denser view with labels on the same line as the fields and less space between lines. The cozy setting resembles compact, but with more space between lines.

You can design your form to respect the display density setting, or set the form density to override the display density setting. Overriding display density gives you more control over the label location, but doesn’t affect spacing. In addition, you can set individual fields in your form to use variants that change the label location for the field.

lightning-record-edit-form, lightning-record-view-form, and lightning-record-form adapt to your org's display density by default or when you set density="auto".

To override the org's display density, specify density="compact" or density="comfy". The cozy value isn’t supported on the density attribute. If an org's display density is set to cozy, labels and fields are on the same line by default.

The following table lists the org’s display density settings and how they relate to the form density on lightning-record-edit-form, lightning-record-view-form, and lightning-record-form.

When the form density is compact, the labels and fields can appear too far apart for a single column form in a larger region. To reduce the space between the label and field when the form uses compact density, use the slds-form-element_1-col class on lightning-input-field or lightning-output-field.

You can set a variant on lightning-input-field if you want specific fields to have a label and field alignment that’s different than that used by the form. A variant overrides the display density for that field.

lightning-input-field supports these variants: standard (default), label-hidden, label-inline, and label-stacked.

This example displays two input fields with inline labels, while the rest of the fields have labels displayed on top of fields due to the comfy form density.

lightning-output-field supports these variants: standard (default) and label-hidden.

This example displays output field values without labels when the form density is comfy. Hidden labels are available to assistive technology.

Additionally, to reduce the space between the label and field when the label variant is label-inline, use the slds-form-element_1-col class on lightning-input-field.

Admins can set the default display density for the org on the Density Settings setup page. Users can choose their own display density at any time. Admins can’t override a user’s display density setting. The org’s default display setting depends on the Salesforce edition. Density changes don’t apply to Salesforce Classic, Experience Cloud sites, or the Salesforce mobile app. For more information, see Configure User Interface Settings.

See Also

• Component Reference: lightning-record-edit-form
• Component Reference: lightning-record-view-form