Text inputs

• When inside a label, the width is browser default or it follows that of the label if that’s longer. Otherwise, it defaults to 100 % and can need some limitation, either on itself or from a parent.
• The width should, within reason, indicate the size of the expected content. For instance, a postal code input shouldn’t be as wide as an email input but also not exactly four or five characters wide. It’s a balance between communicating input type and having a tidy layout.
• Use helpful labels above the input. Supply additional explanations if necessary. Placeholders are rarely needed.
• Use proper input type so the users get more relevant virtual keyboards for the different inputs. This is especially useful for mobile devices and tablets, but it also improves accessibility for everyone.
• Don’t format input like output, set a pattern if you have to.
• Don’t represent output in input elements or style output like disabled inputs. Feel free to use the output element or a description list.

<form class="mb-form flex flex-wrap gcs grm">
  <label for="input-text">Text input label
    <input id="input-text" type="text" />
  </label>

  <label for="input-disabled">Disabled
    <input id="input-disabled" type="text" disabled />
  </label>
</form>

Textarea

<form class="mb-form maxw32r">
  <label for="input-textarea">Text areas also need labels</label>
  <textarea id="input-textarea"></textarea>
</form>

Input types

Properly defined input type and mode attributes give users more relevant virtual keyboards for the different inputs. This is especially useful for mobile devices and tablets, but it also improves accessibility for everyone.

Read more about all the different input types.

<form class="mb-form flex flex-wrap grm gcs">
  <label>
    Text input
    <input type="text" />
  </label>
  <label>
    Email input
    <input type="email" />
  </label>
  <label>
    Phone input
    <input type="tel" />
  </label>
  <label>
    Numeric input
    <input type="text" inputmode="numeric" />
  </label>
</form>