Mozilla Protocol
  • 19.1.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>