HTML label form controls best practices in JSX and React applications

What is an HTML label control

In HTML, a form control is an element that allows the user to interact with a web page. Examples of form controls include text fields, checkboxes, radio buttons, and submit buttons. Form controls are typically placed inside a form element, and are used to collect user input and submit it to a server for processing.

A label element is used to represent a caption for a form control. It can be associated with a form control using the for attribute, which should be equal to the id of the form control. When a user clicks on the label, it will toggle the associated form control. This is useful for usability, as it allows users to click on the label to select the form control, rather than having to click directly on the form control itself.

Here's an example of how a label element can be used:

COPY<form action="/submit-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" /><br />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" /><br />

  <label for="newsletter">Sign up for newsletter:</label>
  <input type="checkbox" id="newsletter" name="newsletter" /><br />

  <input type="submit" value="Submit" />
</form>

Why should a label be associated with a form control

There are a few reasons why it is generally a good idea to associate a form control with a label element:

• Improved usability: By using a label element to provide a caption for a form control, the label can be placed next to the form control, making it clear to the user what the form control is for. This can make the form easier to use and understand.
• Improved accessibility: Screen readers, which are used by people with visual impairments to access the web, rely on the label element to understand the purpose of form controls. By associating a form control with a label, you can make it easier for screen reader users to understand and interact with the form.
• Better form layout: By using label elements, you can control the layout of the form more easily. For example, you can use CSS to style the labels and form controls differently or use the label element to wrap the form control and its caption in a single container element.

In general, it is a good idea to use label elements to provide captions for form controls whenever possible, as it can improve the usability, accessibility, and layout of the form.

How can we create a label with associated controls

To avoid creating form controls that do not have associated label elements, you can follow these best practices:

Make sure to include a label element for every form control: Each form control should have a corresponding label element that provides a caption for the form control.

COPY<!-- BAD -->
<form action="/submit-form">
  <input type="text" id="name" name="name" />
</form>

Use the for attribute to associate the label with the form control: The for attribute of the label element should be set to the id of the form control. This will associate the label with the form control and allow users to click on the label to focus the form control.

COPY<form action="/submit-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
</form>

Use the label element to wrap the form control: Instead of placing the label element before or after the form control, you can wrap the form control and the label element in a single container element. This can make it easier to ensure that every form control has a corresponding label.

COPY<form action="/submit-form">
  <label for="name">
    Name:
    <input type="text" id="name" name="name" />
  </label>
</form>

By following these best practices, you can ensure that all of your form controls have associated label elements, which can improve the usability and accessibility of your forms.

Automatically check for associated label controls

Codiga provides IDE plugins and integrations with GitHub, GitLab, or Bitbucket to detect missing label controls. The Codiga static code analysis detects this issue directly in your IDE or code reviews.

In particular, this analysis rule produces a warning each time there is a label with a missing form control.

To use this rule consistently, all you need to do is to install the integration in your IDE (for VS Code or JetBrains) or code management system and add a codiga.yml file at the root of your profile with the following content:

COPYrulesets:
  - jsx-a11y

It will then check all your JSX code against 10+ rules that detect common accessibility issues.

More resources

• <label>: The Label element
• Basic native form controls
• jsx-a11y/label-has-associated-control
• 6 Static Code Testing Practices You Should Master