Label

Label is a container for form elements with useful utilities.

Overview

Label provides a text label, positioning, alignment, and accessibility helpers for wrapped control components. Its layout property can be modified for different displays, depending on the use case of the labeled component.

Usage

Sample

Accessibility

Label should accompany all form-based controls, including Inputs, Checkboxes, Radio buttons, and Dropdowns. It provides a purposeful description to the form control supporting a more diverse audience and assistive technologies.

Components can be wrapped with a Label, or use the for property, where the value is represented by the associated component's id value. Learn more about the label for attribute on MDN.

Writing and copy

Correct Label writing
Do prefer brevity in Labels, and use sentence case.
Avoid Label writing
Avoid large amounts of copy, and avoid title case.

API reference

Properties

Slots

Styles

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.