Input Component Labels

A label describes the purpose of an input component. To set a label on an input component, use the label attribute.

This example shows how to use labels using the label attribute on an input component.

<lightning:input type="number" name="myNumber" label="Pick a Number:" value="54" />

The label is placed on the left of the input field and can be hidden by setting variant="label-hidden", which applies the slds-assistive-text class to the label to support accessibility.

Using $Label

Use the $Label global value provider to access labels stored in an external source. For example:

<lightning:input type="number" name="myNumber" label="{!$Label.Number.PickOne}" />
To output a label and dynamically update it, use the format() expression function. For example, if you have np.labelName set to Hello {0}, the following expression returns Hello World if v.name is set to World.
{!format($Label.np.labelName, v.name)}