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

3 samples
1
2
3
4
<calcite-label>
    Favorite vegetable
    <calcite-input placeholder="Enter your vegetable"></calcite-input>
</calcite-label>
v3.0.3

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.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close