💠 Label

Renders an accessible label associated with controls.

Usage

The Label component is a fundamental HTML element that provides an accessible name for interactive controls such as text fields, checkboxes, radio buttons, and other form elements.

By binding a label to a specific control, users can interact with the input more easily, especially on touch screens, and it ensures that the form element is announced correctly by screen readers.

When to use

• Form controls association: Use a Label for every form control to provide a textual descriptor that aids users in understanding the purpose of the control.
• Improving touch targets: Employ Labels to increase the touch target area for controls, making them easier to interact with, especially on mobile devices.
• Accessibility enhancement: Utilize Labels to improve accessibility. Screen readers rely on labels to announce form controls, aiding users who rely on assistive technology to navigate and interact with your application.
• Visual consistency: A consistent styling and positioning of Labels help maintain visual consistency in your forms, leading to a more cohesive user interface and a better user experience.

Avoid using labels as placeholders within form controls, as this can cause usability issues when the placeholder text disappears on focus or entry. Do not use labels for decorative purposes; their primary function is to describe and indicate the purpose of a form control. Labels should not be overly verbose; they should be brief yet descriptive enough to be understood out of context.

Examples

With checkbox

With input

With textarea

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the htmlFor attribute. For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.