• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Example
    1. Size
    2. Position
    3. Align message with input
    4. HTML Content
  2. Properties
  3. Shadow Parts
Components Label
(external link)

ld-label #

This component is meant to be used in conjunction with form input components, such as the ld-input component, and the ld-input-message component.

Example #

<ld-label>Email Address</ld-label>
<label class="ld-label">Email Address</label>
<LdLabel>Email Address</LdLabel>
Email Address

Size #

The default size is small. You can use a slightly bigger label (size medium) by applying the size="m" property.

<ld-label size="m">
Email Address
</ld-label>
<label class="ld-label ld-label--m">
Email Address
</label>
<LdLabel size="m">
Email Address
</LdLabel>
Email Address

Position #

How the label positions its child elements depends both on its position prop and the type of the input element that it wrapps. For instance, if the component contains an ld-input-message component, it gets horizontally aligned with larger input elements such as the ld-input or the ld-select component, but not with narrower input elements such as ld-checkbox or a ld-toggle component.

Top (default position) #

<ld-label>
Email Address
<ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
</ld-label>

<ld-label>
Email Address
<ld-input invalid placeholder="jane.doe@example.com" type="email"></ld-input>
<ld-input-message>This field is required.</ld-input-message>
</ld-label>

<ld-label>
Auto-update
<ld-toggle></ld-toggle>
<ld-input-message mode="info">Recommended.</ld-input-message>
</ld-label>
<label class="ld-label">
Email Address
<div class="ld-input">
<input placeholder="jane.doe@example.com" type="email">
</div>
</label>

<label class="ld-label">
Email Address
<div class="ld-input ld-input--invalid">
<input placeholder="jane.doe@example.com" type="email">
</div>
<span class="ld-input-message ld-input-message--error">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path d="M4.66675 4.66699L9.33341 9.33366" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 9.33301L9.33341 4.66634" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
This field is required.
</span>
</label>

<label class="ld-label">
Auto-update
<div class="ld-toggle">
<input type="checkbox" />
<span class="ld-toggle__knob"></span>
</div>
<span class="ld-input-message ld-input-message--info">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="var(--ld-thm-warning)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-col-neutral-900)"/>
<ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-col-neutral-900)"/>
</svg>
Recommended.
</span>
</label>
<LdLabel>
Email Address
<LdInput placeholder="jane.doe@example.com" type="email" />
</LdLabel>

<LdLabel>
Email Address
<LdInput invalid placeholder="jane.doe@example.com" type="email" />
<LdInputMessage>This field is required.</LdInputMessage>
</LdLabel>

<LdLabel>
Auto-update
<LdToggle />
<LdInputMessage mode="info">Recommended.</LdInputMessage>
</LdLabel>
Email Address Email Address This field is required. Auto-update Recommended.

Left #

<ld-label position="left" size="m">
Email Address
<ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
</ld-label>

<ld-label position="left" size="m" align-message>
Email Address
<ld-input invalid placeholder="jane.doe@example.com" type="email"></ld-input>
<ld-input-message>This field is required.</ld-input-message>
</ld-label>

<ld-label position="left" size="m">
Auto-update
<ld-toggle></ld-toggle>
<ld-input-message mode="info">Recommended.</ld-input-message>
</ld-label>
<label class="ld-label ld-label--left ld-label--m">
Email Address
<div class="ld-input">
<input placeholder="jane.doe@example.com" type="email">
</div>
</label>

<label class="ld-label ld-label--left ld-label--m ld-label--align-message">
Email Address
<div class="ld-input ld-input--invalid">
<input placeholder="jane.doe@example.com" type="email">
</div>
<span class="ld-input-message ld-input-message--error">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path d="M4.66675 4.66699L9.33341 9.33366" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 9.33301L9.33341 4.66634" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
This field is required.
</span>
</label>

<label class="ld-label ld-label--left ld-label--m">
Auto-update
<div class="ld-toggle">
<input type="checkbox" />
<span class="ld-toggle__knob"></span>
</div>
<span class="ld-input-message ld-input-message--info">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="var(--ld-thm-warning)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-col-neutral-900)"/>
<ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-col-neutral-900)"/>
</svg>
Recommended.
</span>
</label>
<LdLabel position="left" size="m">
Email Address
<LdInput placeholder="jane.doe@example.com" type="email" />
</LdLabel>

<LdLabel position="left" size="m" alignMessage>
Email Address
<LdInput invalid placeholder="jane.doe@example.com" type="email" />
<LdInputMessage>This field is required.</LdInputMessage>
</LdLabel>

<LdLabel position="left" size="m">
Auto-update
<LdToggle />
<LdInputMessage mode="info">Recommended.</LdInputMessage>
</LdLabel>
Email Address Email Address This field is required. Auto-update Recommended.

Right #

<ld-label position="right" size="m">
Email Address
<ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
</ld-label>

<ld-label position="right" size="m" align-message>
Email Address
<ld-input invalid placeholder="jane.doe@example.com" type="email"></ld-input>
<ld-input-message>This field is required.</ld-input-message>
</ld-label>

<ld-label position="right" size="m">
Auto-update
<ld-toggle></ld-toggle>
<ld-input-message mode="info">Recommended.</ld-input-message>
</ld-label>
<label class="ld-label ld-label--right ld-label--m">
Email Address
<div class="ld-input">
<input placeholder="jane.doe@example.com" type="email">
</div>
</label>

<label class="ld-label ld-label--right ld-label--m ld-label--align-message">
Email Address
<div class="ld-input ld-input--invalid">
<input placeholder="jane.doe@example.com" type="email">
</div>
<span class="ld-input-message ld-input-message--error">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path d="M4.66675 4.66699L9.33341 9.33366" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 9.33301L9.33341 4.66634" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
This field is required.
</span>
</label>

<label class="ld-label ld-label--right ld-label--m">
Auto-update
<div class="ld-toggle">
<input type="checkbox" />
<span class="ld-toggle__knob"></span>
</div>
<span class="ld-input-message ld-input-message--info">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="var(--ld-thm-warning)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-col-neutral-900)"/>
<ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-col-neutral-900)"/>
</svg>
Recommended.
</span>
</label>
<LdLabel position="right" size="m">
Email Address
<LdInput placeholder="jane.doe@example.com" type="email" />
</LdLabel>

<LdLabel position="right" size="m" alignMessage>
Email Address
<LdInput invalid placeholder="jane.doe@example.com" type="email" />
<LdInputMessage>This field is required.</LdInputMessage>
</LdLabel>

<LdLabel position="right" size="m">
Auto-update
<LdToggle />
<LdInputMessage mode="info">Recommended.</LdInputMessage>
</LdLabel>
Email Address Email Address This field is required. Auto-update Recommended.

Align message with input #

When positioning the label left or right, you may want to position the ld-input-message right under the input field that is wrapped by the ld-label. You can do set the align-message-attribute to achieve this behavior. With this attribute set (and the label being positioned left or right), the ld-input-message will also never grow underneath the label.

<ld-label position="left" size="m">
Email Address
<ld-input invalid placeholder="jane.doe@example.com" type="email"></ld-input>
<ld-input-message>I do not align with the input.</ld-input-message>
</ld-label>

<ld-label position="left" size="m" align-message>
Email Address
<ld-input invalid placeholder="jane.doe@example.com" type="email"></ld-input>
<ld-input-message>I align with the input.</ld-input-message>
</ld-label>

<ld-label position="right" size="m" align-message>
Email Address
<ld-input invalid placeholder="jane.doe@example.com" type="email"></ld-input>
<ld-input-message>I never grow underneath the label, even though I am very long.</ld-input-message>
</ld-label>
<label class="ld-label ld-label--left ld-label--m">
Email Address
<div class="ld-input ld-input--invalid">
<input placeholder="jane.doe@example.com" type="email">
</div>
<span class="ld-input-message ld-input-message--error">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path d="M4.66675 4.66699L9.33341 9.33366" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 9.33301L9.33341 4.66634" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
I do not align with the input.
</span>
</label>

<label class="ld-label ld-label--left ld-label--m ld-label--align-message">
Email Address
<div class="ld-input ld-input--invalid">
<input placeholder="jane.doe@example.com" type="email">
</div>
<span class="ld-input-message ld-input-message--error">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path d="M4.66675 4.66699L9.33341 9.33366" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 9.33301L9.33341 4.66634" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
I align with the input.
</span>
</label>

<label class="ld-label ld-label--right ld-label--m ld-label--align-message">
Email Address
<div class="ld-input ld-input--invalid">
<input placeholder="jane.doe@example.com" type="email">
</div>
<span class="ld-input-message ld-input-message--error">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path d="M4.66675 4.66699L9.33341 9.33366" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 9.33301L9.33341 4.66634" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
I never grow underneath the label, even though I am very long.
</span>
</label>
<LdLabel position="left" size="m">
Email Address
<LdInput invalid placeholder="jane.doe@example.com" type="email" />
<LdInputMessage>I do not align with the input.</LdInputMessage>
</LdLabel>

<LdLabel position="left" size="m" alignMessage>
Email Address
<LdInput invalid placeholder="jane.doe@example.com" type="email" />
<LdInputMessage>I align with the input.</LdInputMessage>
</LdLabel>

<LdLabel position="right" size="m" alignMessage>
Email Address
<LdInput invalid placeholder="jane.doe@example.com" type="email" />
<LdInputMessage>
I never grow underneath the label, even though I am very long.
</LdInputMessage>
</LdLabel>
Email Address I do not align with the input. Email Address I align with the input. Email Address I never grow underneath the label, even though I am very long.

HTML Content #

HTML content describing the labeled element should be wrapped in a single HTML element (e.g. a span):

<ld-label position="right">
<span>I love to <code style="line-height: 0">code</code>.</span>
<ld-checkbox></ld-checkbox>
</ld-label>

<ld-label position="right">
<span>I love to <code style="line-height: 0">code</code>.</span>
<ld-checkbox invalid></ld-checkbox>
<ld-input-message>Please confirm that you love to code.</ld-input-message>
</ld-label>
<label class="ld-label ld-label--right">
<span>I love to <code style="line-height: 0">code</code>.</span>
<div class="ld-checkbox">
<input type="checkbox">
<svg
class="ld-checkbox__check"
width="14"
height="14"
fill="none"
viewBox="0 0 14 14"
>

<path
d="M12 4L5.40795 10L2 6.63964"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>

</svg>
<div class="ld-checkbox__box"></div>
</div>
</label>

<label class="ld-label ld-label--right">
<span>I love to <code style="line-height: 0">code</code>.</span>
<div class="ld-checkbox ld-checkbox--invalid">
<input type="checkbox">
<svg
class="ld-checkbox__check"
width="14"
height="14"
fill="none"
viewBox="0 0 14 14"
>

<path
d="M12 4L5.40795 10L2 6.63964"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>

</svg>
<div class="ld-checkbox__box"></div>
</div>
<span class="ld-input-message ld-input-message--error">
<svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path d="M4.66675 4.66699L9.33341 9.33366" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.66675 9.33301L9.33341 4.66634" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Please confirm that you love to code.
</span>
</label>
<LdLabel position="right">
<span>I love to <code style={ { lineHeight: 0 } }>code</code>.</span>
<LdCheckbox />
</LdLabel>

<LdLabel position="right">
<span>I love to <code style={ { lineHeight: 0 } }>code</code>.</span>
<LdCheckbox invalid />
<LdInputMessage>Please confirm that you love to code.</LdInputMessage>
</LdLabel>
I love to code. I love to code. Please confirm that you love to code.

Properties #

Property Attribute Description Type Default
alignMessage align-message Align input message with input position. boolean undefined
key key for tracking the node's identity when working with lists string | number undefined
position position Relative position to labeled element. Default is top. "left" | "right" undefined
ref ref reference to component any undefined
size size Size of the label. Default is small. "m" undefined

Shadow Parts #

Part Description
"tag" Actual label element

Built with StencilJS