Floating label settings

Description

Defines the appearance and behavior of floating control labels.

Discussion

A floating label is a dynamic label displayed as either a watermark or text above the control. The watermark is used when the control has no value (such as a blank text box.) When the user interacts with the control, or the control has a value, the label is placed above the control, i.e. the floating position. Animations are also used to transition from the watermark to the floating position.

Edit controls (text boxes, text areas, and dropdowns) in a UX component support floating labels.

images/labelfloatabove.gif

Configuring Floating Label Settings 

images/floatingLabelSettings.png

The Floating Label Settings affect the behavior of all floating labels in a component. These settings include:

  • Padding on left when label is in floated position
  • Padding on right when label is in floated position
  • Margin above label when label is in floated position
  • The label's location relative to the control
  • The label's font size when label is in floated position

In the image below, the insideControl option has been selected. Also note that the edit control sub-theme has been set to a custom sub-theme based on the Primary sub-theme (which puts a border around the control). The custom sub-theme has set the border-radius to 10px.

images/fkiatubglabels302.jpg

To define settings, click the smart field for Floating label settings

Property
Description
Indent - left

The distance between the left edge of the control and the label. The left indentation is specified using CSS units. E.g. 4px, 0.5in.

Indent - right

The distance between the right edge of the control and the label. Right indentation only applies if the [Alignment] property for the control's label is set to Right. The right indentation is specified using CSS units. E.g. 4px, 0.5in.

Margin - above

The distance between the label when positioned above the control and the control, container, or object located above the label. The above margin is specified using CSS units. E.g. 4px, 0.5in. Defaults to 20px.

Floated label location

The location where the label will be positioned relative to the control. Can be one of the following locations:

Location
Description
aboveControl

Label is positioned outside of the control.

insideControl

Label is positioned inside the control.

Floated label font size

The label's font size when floated above the control. The font size is specified using CSS units. E.g. 20px, 12pt. Defaults to 10px.

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

See Also