Skip to content

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

PropertyAttributeDescriptionTypeDefault
alignmentalignmentSpecifies the text alignment of the component."center" | "end" | "start""start"
forforSpecifies the id of the component the label is bound to. Use when the component the label is bound to does not reside within the component.string
layoutlayoutDefines the layout of the label in relation to the component. Use "inline" positions to wrap the label and component on the same line."default" | "inline" | "inline-space-between""default"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"

Slots

NameDescription
default (unnamed)A slot for adding text and a component that can be labeled.

Styles

NameDescription
--calcite-label-margin-bottomSpecifies the component's bottom spacing.
--calcite-label-text-colorSpecifies the component's text color.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

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