Label

The Label component is used to associate descriptive text with form inputs, ensuring accessibility and proper form structure. All form inputs should have an associated label element with a matching for attribute.

Accessibility Guidelines

• Always associate inputs with a descriptive label element
• Use the for attribute to link the label to its corresponding input
• The for attribute must match the id of the associated input element
• Required inputs should be clearly marked
• Inputs with errors should have appropriate aria-invalid and aria-describedby attributes

Variations

Default Label

The standard label used for most form inputs.

Text Field

<div class="cmp-form-field">
  <label for="text-field-default" class="cmp-form-label">Text Field</label>
  <div>
    <div class="util-position-relative">
      <input
        id="text-field-default"
        class="cmp-form-field__input"
        type="text"
        placeholder="Placeholder Text"
      />
    </div>
  </div>
</div>

Required Label

Labels for required fields should be wrapped in a container with the cmp-form-field--required class to display the required indicator.

Required Text Field

<div class="cmp-form-field">
  <label for="text-field-required" class="cmp-form-label">
    Required Text Field
  </label>
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="text-field-required"
        class="cmp-form-field__input"
        type="text"
        placeholder="Placeholder Text"
        required
      />
    </div>
  </div>
</div>

Error Label

Labels can display an error state by adding the class cmp-form-label--error, which applies red text color.

Text Field with Error

This is an error message.

<div class="cmp-form-field">
  <label for="text-field-error" class="cmp-form-label cmp-form-label--error">
    Text Field with Error
  </label>
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="text-field-error"
        class="cmp-form-field__input cmp-form-field__input--error"
        type="text"
        placeholder="Placeholder Text"
        required
        aria-describedby="error-message-1"
        aria-invalid="true"
      />
    </div>
  </div>
  <p id="error-message-1" class="cmp-form__error-message">
    This is an error message.
  </p>
</div>

Faux-Placeholder Label

The faux-placeholder variation creates an animated label that behaves like a placeholder, moving out of the way when the input is focused or has a value. Add the class cmp-form-label--faux-placeholder to the label. This requires the label to be positioned after the input in the DOM. Faux-placeholder inputs should use placeholder=" " (a single space) to enable the :not(:placeholder-shown) CSS selector.

Animated Placeholder

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="text-field-faux"
        class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
        type="text"
        placeholder=" "
        required
      />
      <label
        for="text-field-faux"
        class="cmp-form-label cmp-form-label--faux-placeholder"
      >
        Animated Placeholder
      </label>
    </div>
  </div>
</div>

Faux-Placeholder with Error

The faux-placeholder can also be combined with the error state by adding both cmp-form-label--faux-placeholder and cmp-form-label--error classes.

Animated Placeholder with Error

This field contains an error.

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="text-field-faux-error"
        class="cmp-form-field__input cmp-form-field__input--faux-placeholder cmp-form-field__input--error"
        type="text"
        placeholder=" "
        required
        aria-describedby="error-message-2"
        aria-invalid="true"
      />
      <label
        for="text-field-faux-error"
        class="cmp-form-label cmp-form-label--error cmp-form-label--faux-placeholder"
      >
        Animated Placeholder with Error
      </label>
    </div>
  </div>
  <p id="error-message-2" class="cmp-form__error-message">
    This field contains an error.
  </p>
</div>