@citizensadvice/cads-form-fieldsets

    0.0.5 • Public • Published

    Form fieldsets

    npm (scoped)

    Component type

    • Component

    Dependencies:

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

    Installation

    $ npm install @citizensadvice/cads-form-fieldsets
    
    @import "@citizensadvice/cads-form-fieldsets/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-fieldsets@latest/build/cads.form-fieldsets.css" />

    Implementation

    Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.

    Any general text which is important for filling in the form and cannot be put into a hint, should be in that legend (as shown in the checkbox example). But the legend shouldn’t be too long either.

    <fieldset class="c-fieldset">
      ...
    </fieldset>

    Fieldset items

    Oftentimes multiple inputs are required within one fieldset, for example radio buttons or checkboxes. For those instances, we've made a class available to give a little extra breathing space.

    <fieldset class="c-fieldset">
      <div class="c-fieldset__item">
        ...
      </div>
     
      <div class="c-fieldset__item">
        ...
      </div>
    </fieldset>

    Inline fieldset items

    Sometimes you’ll need the items of your fieldset to be inline rather than stacked. Using the c-fieldset--inline class will allow you to do this.

    <fieldset class="c-fieldset c-fieldset--inline">
      <legend class="c-label">Did this help?</legend>
     
      <div class="c-fieldset__item">
        <div class="c-radio">
          <input checked id="yes" value="yes" name="feedback" type="radio">
          <label for="yes">Yes</label>
        </div>
      </div>
     
      <div class="c-fieldset__item">
        <div class="c-radio">
          <input id="no" value="no" name="feedback" type="radio">
          <label for="no">No</label>
        </div>
      </div>
    </fieldset>

    Keywords

    none

    Install

    npm i @citizensadvice/cads-form-fieldsets

    DownloadsWeekly Downloads

    6

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    4.77 kB

    Total Files

    6

    Last publish

    Collaborators

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