@citizensadvice/cads-form-labels

    0.0.5 • Public • Published

    Form labels

    npm (scoped)

    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>

    Keywords

    none

    Install

    npm i @citizensadvice/cads-form-labels

    DownloadsWeekly Downloads

    5

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    5.66 kB

    Total Files

    6

    Last publish

    Collaborators

    • oliverroick
    • davidrapson
    • davidsauntson
    • mrdaniellewis
    • dianafrunza
    • baseonmars
    • panosvoudouris
    • chrisbrettca