Mozilla Protocol
  • 22.0.0

Field

The Field component is a wrapper around a field-label and field-control for more customized form styling. Though <label> and <input> elements get some default styling without these classes applied, wrapping them in a Field and adding the mzp-c-field-label and mzp-c-field-control classes will ensure the right spacing, especially when using other layout options.

Tips

  • The Field wrapper can also contain an optional field-info component for added notes or instructions.
  • The Field layout features are most useful in larger forms. They may not be needed for a small or simple form, like a single search box or a login form.
  • Add the class mzp-l-stretch for full-width fields (preferably in a narrow form).
<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="text">Text Field</label>
  <input class="mzp-c-field-control" type="text" name="text" id="text" value=""></div>


<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="select">Select Field</label>
  <select class="mzp-c-field-control" name="select" id="select"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></select></div>


<div class="mzp-c-field">
  <label class="mzp-c-field-label" for="textarea">Textarea Field</label>
  <textarea class="mzp-c-field-control" id="textarea" rows="4" cols="25" ></textarea></div>