Skip to main content

Label

The Label element represents a caption for an item in a user interface.

— Definition from the MDN web docs

Text​

The text property sets the label contents:

Loading...
Live Editor
<qds-label text="Name:"></qds-label>

Writing guidelines​

Required​

Set the required attribute to display a red asterisk next to the label:

Loading...
Live Editor
<label class="qds-controls qds-related flex-row">
  <qds-label inline required text="Name:"></qds-label>
  <qds-input required></qds-input>
</label>

Size​

Labels follow the transversal control size principles. Use the standard size unless you're in one of the specific contexts described on that page.

Loading...
Live Editor
<div class="qds-controls qds-related">
  <label class="qds-controls qds-related flex flex-row">
    <qds-label inline text="Standard size:"></qds-label>
    <qds-button text="Button"></qds-button>
  </label>
  <label class="qds-controls-large qds-related flex flex-row">
    <qds-label inline size="large" text="Large size:"></qds-label>
    <qds-button size="large" text="Button"></qds-button>
  </lab>
  <label class="qds-controls-small qds-related flex flex-row">
    <qds-label inline size="small" text="Small size:"></qds-label>
    <qds-button size="small" text="Button"></qds-button>
  </label>
</div>

Layout​

Use the related controls spacing amount between a label and its siblings:

Loading...
Live Editor
<div class="qds-controls qds-related">
  <qds-label required text="Choose one more more options:"></qds-label>
  <qds-checkbox text="Option 1"></qds-checkbox>
  <qds-checkbox text="Option 2"></qds-checkbox>
  <qds-checkbox text="Option 3"></qds-checkbox>
</div>

Inlining​

Set the inline attribute to let the label align nicely with siblings' labels:

Loading...
Live Editor
<label class="qds-controls qds-related flex-row">
  <qds-label inline required text="Name:"></qds-label>
  <qds-input required></qds-input>
</label>

If the label is too long, it will span over multiple lines, but its baseline will remain aligned with the other controls:

Loading...
Live Editor
<label class="qds-controls qds-related flex-row">
  <qds-label inline required text="This is a very long label that will span over multiple lines if the screen is not large enough:"></qds-label>
  <qds-input required></qds-input>
</label>

In forms​

Follow the Forms design pattern guidelines to properly organize and space your form labels and controls.

Implementation tips​

Using with <label>​

The <qds-label> component works in pair with the native <label> component, but it does not replace it.

Always use the native <label> element, combined with the <qds-label> component:

  • screen readers will read the label when the input is focused (accessibility best practice)
  • clicking or tapping the label will give focus to the related input field (mobile best practice)
Loading...
Live Editor
<div class="qds-controls qds-related grid grid-cols-[2fr,3fr]">
  <label for="my-input1" class="justify-self-end">
    <qds-label inline text="First input:"></qds-label>
  </label>
  <qds-input id="my-input1"></qds-input>
  <label for="my-input2" class="justify-self-end">
    <qds-label inline text="Second input:"></qds-label>
  </label>
  <qds-input id="my-input2"></qds-input>
</div>

Custom width​

Inputs have a default size, depending on their type. Use the width CSS property as you usually do to set a custom width.

For example, you can use the flex-1 utility class from our Tailwind preset:

Loading...
Live Editor
<div class="qds-controls flex-row w-full">
  <label class="qds-controls qds-related flex-row w-full">
    <qds-label inline text="First name:"></qds-label>
    <qds-input class="flex-1"></qds-input>
  </label>
  <label class="qds-controls qds-related flex-row w-full">
    <qds-label inline text="Last name:"></qds-label>
    <qds-input class="flex-1"></qds-input>
  </label>
</div>

Or you can use the w-full utility class for mobile display:

Loading...
Live Editor
<div class="qds-controls qds-related">
  <qds-label text="First name:"></qds-label>
  <qds-input text="Full width" class="w-full"></qds-input>
</div>

Importing​

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsLabel } from 'https://cdn.jsdelivr.net/npm/@quartzds/core@next+esm'
defineCustomElementQdsLabel()

Component reference​

Properties​

Attribute / PropertyTypeDescriptionDefault
inline
boolean

Adds vertical margin to the label for alignment.

This is useful when creating inline layouts so that the first lines have the correct vertical centering.

false
required
boolean

Specify the labelled item as required by appending a red asterisk (*).

false
size
"large" | "small" | "standard" | undefined

The label's size.

'standard'
text
string | undefined

The label's text.

undefined
Last updated on