Label

Calcite Label is a wrapper component with useful utilities.

Overview

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

Wrapped control for Inputs, Checkboxes, Radio Buttons, Switches, Sliders, Comboboxes, and other elements
As a visual anchor for sections of content

Show code snippet

Copy code snippet

v1.0.0-beta.83

Toggle preview theme

Toggle preview direction

Do prefer brevity in Labels, and use sentence case.

Avoid large amounts of copy, and avoid title case.

calcite-label

v1.0.0-beta.83

Property	Attribute	Description	Type	Values
alignment	alignment	specify the text alignment of the label	typedChoose from a set of typed values	`centerendstart (default)`
disableSpacing	disable-spacing	eliminates any space around the label	booleanA boolean property should be present, or not	`truefalse`
disabled	disabled	deprecateduse the `disabled` property on the interactive components instead is the label disabled	booleanA boolean property should be present, or not	`truefalse`
for	for	The id of the input associated with the label	stringA custom string	`undefined`
layout	layout	is the wrapped element positioned inline with the label slotted text	typedChoose from a set of typed values	`default (default)inlineinline-space-between`
scale	scale	specify the scale of the label, defaults to m	typedChoose from a set of typed values	`lm (default)s`
status	status	deprecatedset directly on child element instead specify the status of the label and any child input / input messages	typedChoose from a set of typed values	`idle (default)invalidvalid`

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