Text field

Notes

  • make field widths proportional to the input they take
  • ensure that users can enter the information they need at smaller screen sizes
  • snap form fields to 100% width at smaller screen sizes
<!-- Start: @text-field--default -->
<div class="form-group">
    <label class="form-label" for="textField">National Insurance number <span class="form-hint">It'll be on your last payslip. For example, VO 12 34 56 D</span></label>
    <input class="form-control" id="textField" type="text">
</div>
<!-- End: @text-field--default -->
 
<div class="form-group">
	{% include '@form-label' %}
	<input class="form-control" id="{{ id }}" type="text">
</div>
 
{
  "@text-field--default": {
    "id": "textField",
    "label": "National Insurance number",
    "hint": "It'll be on your last payslip. For example, VO 12 34 56 D"
  }
}