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. A label element should have the for attribute and match the value of input control id attribute, OR the label should be wrapped around an input. Input controls include <input>, <textarea>, and <select>.

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

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