Form labels

Component type

• Component

Dependencies:

Name	Description
@citizensadvice/cads-support	System-wide global variables and functions

Installation

$ npm install @citizensadvice/cads-form-labels

@import "@citizensadvice/cads-form-labels/index.scss";

You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-form-labels@latest/build/cads.form-labels.css" />

Implementation

Labels should normally exist alongside input elements, but can also be used in a standalone situation by using the .c-label class where you’d like some text to visually look like it’s a label.

<fieldset class="c-fieldset">
  <label class="c-label" for="firstname">First name:</label>
  ...
</fieldset>

Labels and legends

A <legend /> is also a type of label in our system and will look visually the same. You can use either:

• <label />
• <legend />
• <label class="c-label" />
• <legend class="c-label" />

Whatever element/class combination you choose, they will all visually look the identical.

<fieldset class="c-fieldset">
  <label for="">Label #1:</label>
  <label class="c-label" for="">Label #2:</label>
  <legend for="">Label #3:</legend>
  <legend class="c-label" for="">Label #4:</legend>
  ...
</fieldset>

Label tags and meta information

We also have a couple of extra components available within the c-label component for when you’d like to include extra information such as a hint of how to proceed or an optional flag. Those are:

• .c-label__tag
• combining the above with .c-label__tag--optional wraps the text in ‘( )’
• .c-label__meta which is used for the hint text underneath a .c-label component.

<fieldset class="c-fieldset">
  <label class="c-label" for="surname">
    Surname: <span class="c-label__tag c-label__tag--optional">optional</span>
  </label>
  <span class="c-label__metainfo">With additional help text</span>
  <div class="c-input">
    <input id="surname" type="text" required>
  </div>
</fieldset>