Forms, Fields, and Labels

Input components are designed to make it easy to assign labels to form fields. Labels build a programmatic relationship between a form field and its textual label. When using a placeholder in an input component, set the label attribute for accessibility.

Use lightning:input to create accessible input fields and forms. You can use lightning:textarea in preference to the <textarea> tag for multi-line text input or lightning:select instead of the <select> tag.

1<lightning:input name="myInput" label="Search" />

If your code fails, check the label element during component rendering. The label element’s for attribute must match the value of the input control’s id attribute. Alternatively, wrap the label around an input. Input controls include <input>, <textarea>, and <select>.

Here’s an example of the HTML generated by lightning:input.

1<!-- Use label/for -->
2<label for="fullname">Enter your full name:</label>
3<input type="text" id="fullname" />
4
5<!-- Use an implicit label -->
6<label>Enter your full name:
7    <input type="text" id="fullname"/>
8</label>