A ‘fieldgroup’ provides layout to a group of fields such as a set of ‘date’ inputs, typically using a ‘fieldset’ and ‘legend’ in the markup.
<fieldset class="fieldgroup fieldgroup--date" data-qa="widget-date">
<legend class="fieldgroup__title venus">Date</legend>
<div class="fieldgroup__fields">
<div class="field field--input field--day">
<label class="label mercury" for="input-date-range-from-day" id="label-date-range-from-day">Day</label>
<input class="input input--StringField " value="" placeholder="DD" id="input-date-range-from-day" name="date-range-from-day">
</div>
<div class="field field--select field--month">
<label class="label mercury" for="input-date-range-from-month" id="label-date-range-from-month">Month</label>
<select class="input input--select" id="input-date-range-from-month" name="date-range-from-month">
<option disabled="disabled" value="" selected="selected">Select month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="field field--input field--year">
<label class="label mercury" for="input-date-range-from-year" id="label-date-range-from-year">Year</label>
<input data-qa="input-StringField" class="input input--StringField " value="" placeholder="YYYY" id="input-date-range-from-year" name="date-range-from-year">
</div>
</div>
</fieldset>
/* No context defined for this component. */