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 the input components that extend ui:input, except when type="file". For example, use ui:inputTextarea in preference to the <textarea> tag for multi-line text input or the ui:inputSelect component in preference to the <select> tag.

If your code failed, 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>.

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>