Rationale

Unit consist of Length, Area and Volume. All units are localized for ‘en_GB’.

Variants

Adding units is done in the unit.config.js by adding variants.

Collated

All units are collated onto one page.

Context

Units consist of two context items; label and unit.

Label

Label is the full name of the unit and must be human readable.

Unit

Unit is the localized symbol for each unit.

Scope

Global

Dependencies

  • /components/02-form-elements/input/_input.scss
  • /components/02-form-elements/input-type/_input-type.scss
  • assets/sass/partials/vars/_forms.sccs
<div class="field">
    <label class="label venus " for="Hectares">
      Area in hectares
  </label>
    <div class="input-type input-type--unit">
        <input data-qa="input-number" id="Hectares" class="input input--number input-type__input" name="Hectares" value="" pattern="[0-9]*">
        <abbr title="Hectares" class="input-type__type" id="Hectares-type"> ha</abbr>
    </div>
</div>
{
  "label": "Hectares",
  "unit": " ha",
  "label_for": "Hectares",
  "label_text": "Area in hectares"
}