Components
Fieldset
The fieldset component is to show a relationship between multiple inputs in a form. For example, you may need to show a grouped set of text inputs when asking for a users address.
Example
<fieldset class="form__control">
<legend class="heading2">What is your address?</legend>
<div class="form__control">
<label class="form__label">Building and street</label><input type="text" style="max-width:500px; width:100%;"><input type="text" class="mtop-10" style="max-width:500px; width:100%;">
</div>
<div class="form__control mtop-20">
<label class="form__label">Town or city</label><input type="text" style="max-width:320px; width:100%;">
</div>
<div class="form__control mtop-20">
<label class="form__label">County</label><input type="text" style="max-width:320px; width:100%;">
</div>
<div class="form__control mtop-20">
<label class="form__label">Postcode</label><br><input type="text" style="max-width:260px; width:100%;">
</div>
</fieldset>
Portal Code example
- The portal will output fieldset and it’s form controls in a specific way out of the box
- To control the input sizes, you will need to add the appropriate input width class to the input so that the fields are relative to how much information is expected to be entered
- If you are using fieldsets, the labels should not be bold, as the question is the heading. Unless, you are using legends to split up various fieldsets on a single question page.
<div class="tab-column" style="width:100%;">
<div>
<fieldset aria-label="Address Input">
<table role="presentation" data-name="Address_Input" class="section">
<colgroup>
<col style="width:100%;">
<col>
</colgroup>
<tbody>
<tr>
<td colspan="1" rowspan="1" class="clearfix cell text form-control-cell"><div class="info required"><label for="" id="">Street 1</label><div class="validators"><span id="" style="display:none;">*</span><span id="MaximumLengthValidatorlace_line1" style="visibility:hidden;">*</span></div></div><div class="control"><input name="" type="text" maxlength="250" id="lace_line1" class="text form-control input-width--320 " onchange="" aria-required="true" aria-invalid="true" onfocus="validateRequiredField(this.id);" title="Street 1 is a required field." aria-label="Street 1"></div></td>
<td class="cell zero-cell"></td>
</tr>
<tr>
<td colspan="1" rowspan="1" class="clearfix cell text form-control-cell"><div class="info"><label for="" id="">Street 2</label><div class="validators"><span id="MaximumLengthValidatorlace_line2" style="visibility:hidden;">*</span></div></div><div class="control"><input name="" type="text" maxlength="250" id="lace_line2" class="text form-control input-width--320 " onchange="setIsDirty(this.id);"></div></td>
<td class="cell zero-cell"></td>
</tr>
<tr>
<td colspan="1" rowspan="1" class="clearfix cell text form-control-cell"><div class="info"><label for="lace_line3" id="lace_line3_label">Street 3</label><div class="validators"><span id="MaximumLengthValidatorlace_line3" style="visibility:hidden;">*</span></div></div><div class="control"><input name="ctl00$ContentContainer$WebFormControl_fcbb5ced6730e911a8bc00224801a32d$EntityFormView$lace_line3" type="text" maxlength="250" id="lace_line3 " class="text form-control input-width--320 " onchange="setIsDirty(this.id);"></div></td>
<td class="cell zero-cell"></td>
</tr>
<tr>
<td colspan="1" rowspan="1" class="clearfix cell text form-control-cell"><div class="info"><label for="lace_town" id="lace_town_label">Town</label><div class="validators"><span id="MaximumLengthValidatorlace_town" style="visibility:hidden;">*</span></div></div><div class="control"><input name="ctl00$ContentContainer$WebFormControl_fcbb5ced6730e911a8bc00224801a32d$EntityFormView$lace_town" type="text" maxlength="100" id="lace_town" class="text form-control input-width--320" onchange="setIsDirty(this.id);"></div></td>
<td class="cell zero-cell"></td>
</tr>
<tr>
<td colspan="1" rowspan="1" class="clearfix cell text form-control-cell"><div class="info required"><label for="lace_city" id="lace_city_label">City</label><div class="validators"><span id="RequiredFieldValidatorlace_city" style="display:none;">*</span><span id="MaximumLengthValidatorlace_city" style="visibility:hidden;">*</span></div></div><div class="control"><input name="ctl00$ContentContainer$WebFormControl_fcbb5ced6730e911a8bc00224801a32d$EntityFormView$lace_city" type="text" maxlength="100" id="lace_city" class="text form-control input-width--320 " onchange="setIsDirty(this.id);" aria-required="true" aria-invalid="true" onfocus="validateRequiredField(this.id);" title="City is a required field." aria-label="City"></div></td>
<td class="cell zero-cell"></td>
</tr>
<tr>
<td colspan="1" rowspan="1" class="clearfix cell text form-control-cell"><div class="info"><label for="lace_county" id="lace_county_label">County</label><div class="validators"><span id="MaximumLengthValidatorlace_county" style="visibility:hidden;">*</span></div></div><div class="control"><input name="ctl00$ContentContainer$WebFormControl_fcbb5ced6730e911a8bc00224801a32d$EntityFormView$lace_county" type="text" maxlength="100" id="lace_county" class="text form-control input-width--320 " onchange="setIsDirty(this.id);"></div></td>
<td class="cell zero-cell"></td>
</tr>
<tr>
<td colspan="1" rowspan="1" class="clearfix cell text form-control-cell"><div class="info required"><label for="lace_zippostcode" id="lace_zippostcode_label">Postcode</label><div class="validators"><span id="RequiredFieldValidatorlace_zippostcode" style="display:none;">*</span><span id="MaximumLengthValidatorlace_zippostcode" style="visibility:hidden;">*</span></div></div><div class="control"><input name="ctl00$ContentContainer$WebFormControl_fcbb5ced6730e911a8bc00224801a32d$EntityFormView$lace_zippostcode" type="text" maxlength="20" id="lace_zippostcode" class="text form-control input-width--260" onchange="setIsDirty(this.id);" aria-required="true" aria-invalid="true" onfocus="validateRequiredField(this.id);" title="Postcode is a required field." aria-label="Postcode"></div></td>
<td class="cell zero-cell"></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</div>
When to use this
You should use this component if you are asking the user to input data that is relational to one another, across one title. Example being when you are asking for a users address, you could have multiple input fields.