Label

Label is a container for individual form elements with useful utilities.

Overview

Label provides a text label, positioning, alignment, and accessibility helpers for wrapped control components.

Label's display is configurable with the layout property, which adjusts the form element to display beneath, adjacent to, or with space between the Label's text.

Usage

Sample

Accessibility

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

Each element 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.