Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Create Lightning Components in the Developer Console
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Component Composition
Component Body
Component Facets
Best Practices for Conditional Markup
Component Versioning
Using Expressions
Using Labels
Using Custom Labels
Input Component Labels
Dynamically Populating Label Parameters
Getting Labels in JavaScript
Setting Label Values via a Parent Attribute
Localization
Providing Component Documentation
Working with Base Lightning Components
Working with UI Components
Supporting Accessibility
Using Components
Communicating with Events
Creating Apps
Debugging
Fixing Performance Warnings
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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)}