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
Edit sample on Codepen
Writing and copy

API reference
calcite-label
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
alignment | alignment | specify the text alignment of the label | center end start (default) | |
disableSpacing | disable-spacing | eliminates any space around the label | true false | |
disabled | disabled | is the label disabled | true false | |
for | for | The id of the input associated with the label | undefined | |
layout | layout | is the wrapped element positioned inline with the label slotted text | default (default) inline inline-space-between | |
scale | scale | specify the scale of the label, defaults to m | l m (default) s | |
status | status | specify the status of the label and any child input / input messages | idle (default) invalid valid |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding text and a component that can be labeled. |