Field Label

Description

Settings for configuring label for a data control.

Label 

The text shown in the label.

  • Aligning Controls with a Blank Label 

    When a label is placed above a control, it makes the entire control container taller. When placed inline with other controls that do not have a label, the controls will align to the top of the label. Turning the label on but leaving the Label text blank will align controls as expected.

    images/blankLabelText.png
    Left: Dropdown box label Position is set to "None". Right: Dropdown box label Position is set to "Above" and the Label text is blank.

Bubble help 

Optional help text shown when the user hovers the mouse over the label. Bubble help can be used to add tips for how to enter information into a control. See also Has help for adding a help icon to a control.

images/field.png
Bubble help

Class 

The Class property allows you to add one or more classes to the label for the control, including classes from the component's selected Web Theme. Use the smart field button to open the CSS class name selector to choose classes defined in the component's style, locally defined classes, or create new classes to apply to the label.

The images below show a label that has been styled using classes from the iOS7 theme.

images/class.png
Label styled using the iOS7GroupLabel class from the iOS7 web theme
images/class2.png
Label styled using the iOS7ButtonDenyPressed class from the iOS7 web theme

Style 

The Style property adds optional inline style attributes to the label. Use the smart field button to open the Style Editor. The Style Editor provides a UI for specifying the style properties to add to the label. It also contains a Code tab for directly adding CSS styles.

Position 

Sets the position of the label relative to the control:

Position
Description
Above

The label is shown above the control.

Left

The label is shown to the left of the control.

Below

The label is shown below the control.

Right

The label is shown to the right of the control.

None

No label is shown.

Float above

If the control has no value, the label is shown in the control. When the user clicks on the control, the label animates to a position above the control. If the control contains a value, the label is positioned above the control.

You can customize floating labels using the UX component's Floating label settings.

If the Position is Left or Right, the Width determines the width of the label.

Width 

The width of the control's label. The width is specified using CSS syntax (e.g. 5in, 250px.) The {Global.LabelWidth} placeholder can also be used to specify the label width. If set to {Global.LabelWidth}, the label width will be the width specified in the UX component's Label width property.

If blank, the label width will be automatically computed. In some situations, leaving a label's width blank will result in the label appearing above the control.

The width property is only shown if the Position is set to Right or Left.

The Layout type for the UX Component affects how the label and control are sized. If set to ContainerWidth, increasing the label width reduces the width of the control. See Layout type to learn more.

Alignment 

The position of the text within the label.l Text can be Left, Right, or Center aligned. Only applies if the label's Position has been set to Left or Right.

images/labelAlignment.png

If the width of the label is the same width as the text in the label, you may need to make the label wider to see the alignment change.

Videos 

Floating Textbox Labels

A popular design pattern displays the label for a textbox as a watermark in the field. When the user clicks in the field to begin typing, the watermark animates into position above the textbox.

In this video, we show how animated textbox labels can be specified.

2020-07-27