Hide/Suppress Field Label in Modern UI

Hi ​@venkatasivap77 ,

You can use this class="no-label" in the HTML.

Hi ​@venkatasivap77, use the class=”no-label”

 

<field name="UsrMyField" class="no-label"></field>

Adding to the great answers above: class="no-label" is the canonical way and what you'll see used in practice. A few extra details that might help:

Three places no-label can be applied:

1.Single field (what was already shown):

<field name="UsrMyField" class="no-label"></field>

2. Entire fieldset, hides labels for every field inside, useful for stacked checkbox groups:

<qp-fieldset
  id="fs-period-flags"
  slot="A"
  view.bind="SetupRecord"
  caption="Calculation Periods"
  class="no-label">
  <field name="PeriodDaily"></field>
  <field name="PeriodWeekly"></field>
  <field name="PeriodMonthly"></field>
</qp-fieldset>

3. Nested <qp-field> inside replace-content, combinable with col-N for side-by-side layouts:

<field name="FilterFields" unbound replace-content>
  <qp-field control-state.bind="Filter.ShowActive" class="col-6 no-label"></qp-field>
  <qp-field control-state.bind="Filter.ImpactType" class="col-6 no-label"></qp-field>
</field>

Two other forms exist in client-controls but are rarely used in real projects:

1.TS decorator on the view's PXFieldState:

@suppressLabel
MyField: PXFieldState;

2.PXFieldOptions.NoLabel (value 4, combinable with bitwise OR):

MyField: PXFieldState<PXFieldOptions.NoLabel | PXFieldOptions.CommitChanges>;

The TS forms attach the "no label" behavior to the field itself (it travels with the PXFieldState), while the CSS class is per-layout: the same field can show a label on one screen and hide it on another. In practice the CSS form covers 100% of cases in my opinion, because hiding the label is almost always a layout decision tied to a specific fieldset/row, not a global property of the field.

Another tip: if the underlying need is "the label is too wide" rather than "I don't want a label at all," Modern UI also ships label-size-s (100px), label-size-sm (140px), label-size-m (200px), label-size-xm (250px), label-size-l (300px). Often cleaner than hiding the label and re-adding context elsewhere.

Best,