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.

Usage

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

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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

calcite-label
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
alignmentalignment

specify the text alignment of the label

typedChoose from a set of typed values
centerendstart (default)
disableSpacingdisable-spacing

eliminates any space around the label

booleanA boolean property should be present, or not
truefalse
disableddisabled
deprecateduse the `disabled` property on the interactive components instead

is the label disabled

booleanA boolean property should be present, or not
truefalse
forfor

The id of the input associated with the label

stringA custom string
undefined
layoutlayout

is the wrapped element positioned inline with the label slotted text

typedChoose from a set of typed values
default (default)inlineinline-space-between
scalescale

specify the scale of the label, defaults to m

typedChoose from a set of typed values
lm (default)s
statusstatus
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

Slots

NameDescription
default (unnamed)

A slot for adding text and a component that can be labeled.

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