Usage no npm install needed!

<script type="module">
  import citizensadviceCadsFormLabels from 'https://cdn.skypack.dev/@citizensadvice/cads-form-labels';


Form labels

npm (scoped)

Component type

  • Component


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


$ 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" />


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>

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>

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>
  <span class="c-label__metainfo">With additional help text</span>
  <div class="c-input">
    <input id="surname" type="text" required>