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.

1<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:

1<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.

1{!format($Label.np.labelName, v.name)}

See Also

Supporting Accessibility