Inline component for input values representing different units of time.
Label is the full name of the unit and must be human readable.
Global
/components/02-form-elements/input//components/02-form-elements/input-type//components/02-form-elements/label/assets/sass/partials/vars/_forms.scss
<fieldset class="fieldgroup fieldgroup--duration">
<legend id="duration-label" class="fieldgroup__title venus">Time</legend>
<div class="fieldgroup__fields">
<div class="field">
<div class="input-type input-type--unit">
<input data-qa="input-number" id="Time1" class="input input--number input--with-unit input--block" name="Time1" value="" pattern="[0-9]*" aria-labelledby="duration-label Time-type1" />
<abbr title="Hours" class="input-type__type input-type__type--time" id="Time-type1">Hours</abbr>
</div>
</div>
<div class="field">
<div class="input-type input-type--unit">
<input data-qa="input-number" id="Time2" class="input input--number input--with-unit input--block" name="Time2" value="" pattern="[0-9]*" aria-labelledby="duration-label Time-type2" />
<abbr title="Minutes" class="input-type__type input-type__type--time" id="Time-type2">Mins</abbr>
</div>
</div>
<div class="field">
<div class="input-type input-type--unit">
<input data-qa="input-number" id="Time3" class="input input--number input--with-unit input--block" name="Time3" value="" pattern="[0-9]*" aria-labelledby="duration-label Time-type3" />
<abbr title="Seconds" class="input-type__type input-type__type--time" id="Time-type3">Secs</abbr>
</div>
</div>
</div>
</fieldset>
<fieldset class="fieldgroup fieldgroup--duration u-mt-l">
<legend id="duration-label" class="fieldgroup__title venus">Period</legend>
<div class="fieldgroup__fields">
<div class="field">
<div class="input-type input-type--unit">
<input data-qa="input-number" id="Period4" class="input input--number input--with-unit input--block" name="Period4" value="" pattern="[0-9]*" aria-labelledby="duration-label Period-type4" />
<abbr title="Days" class="input-type__type input-type__type--period" id="Period-type4">Days</abbr>
</div>
</div>
<div class="field">
<div class="input-type input-type--unit">
<input data-qa="input-number" id="Period5" class="input input--number input--with-unit input--block" name="Period5" value="" pattern="[0-9]*" aria-labelledby="duration-label Period-type5" />
<abbr title="Months" class="input-type__type input-type__type--period" id="Period-type5">Months</abbr>
</div>
</div>
<div class="field">
<div class="input-type input-type--unit">
<input data-qa="input-number" id="Period6" class="input input--number input--with-unit input--block" name="Period6" value="" pattern="[0-9]*" aria-labelledby="duration-label Period-type6" />
<abbr title="Years" class="input-type__type input-type__type--period" id="Period-type6">Years</abbr>
</div>
</div>
</div>
</fieldset>
{
"label_time": "Time",
"unit1": "Hours",
"unit1Title": "Hours",
"unit2": "Mins",
"unit2Title": "Minutes",
"unit3": "Secs",
"unit3Title": "Seconds",
"label_period": "Period",
"unit4": "Days",
"unit4Title": "Days",
"unit5": "Months",
"unit5Title": "Months",
"unit6": "Years",
"unit6Title": "Years"
}