Text Inputs

Examples

Below are some examples of text input fields.

Basic

<div class="field">
  <label for="text_input">Text Input</label>
  <input id="text_input" type="text">
</div>

Basic with notes

<div class="field">
  <label for="text_input_with_notes">Text Input</label>
  <input id="text_input_with_notes" type="text">
  <p class="field__notes">Some notes for the field above.</p>
</div>

Password with reveal

<div class="field">
  <label for="password_input">Password</label>
  <div class="field__password">
    <input id="password_input" type="password">
    <span id="togglePassword">Show password</span>
  </div>
  <p class="field__notes">Some notes for the field above.</p>
</div>

Textarea

<div class="field">
  <label for="textarea">Text Area</label>
  <textarea name="" id="textarea" rows="10"></textarea>
</div>