Inputs

        
<!-- Input -->
<form id="text" class="coop-form" novalidate>
  <h3>Input</h3>

  <div class="coop-form__row">
    <label for="full-name-1" class="coop-form__label">Full name</label>
    <p id="full-name-1-error" class="coop-form__error" hidden></p>
    <input id="full-name-1" class="coop-form__field coop-form__input" type="text" autocomplete="name" name="full-name-1">
  </div>
</form>

        
<!-- Input with hint -->
<form id="text-hint" class="coop-form" novalidate>
  <h3>Input with hint</h3>

  <div class="coop-form__row">
    <label for="full-name-2" class="coop-form__label">Full name</label>
    <p id="full-name-2-hint" class="coop-form__hint">This is an example hint</p>
    <p id="full-name-2-error" class="coop-form__error" hidden></p>
    <input id="full-name-2" class="coop-form__field coop-form__input" type="text" autocomplete="name" name="full-name-2" aria-describedby="full-name-2-hint">
  </div>
</form>

        
<!-- Input with error message -->
<form id="text-error" class="coop-form" novalidate>
  <h3>Input with error message</h3>

  <div class="coop-form__row">
    <label for="full-name-3" class="coop-form__label">Full name</label>
    <p id="full-name-3-error" class="coop-form__error">Enter your full name</p>
    <input id="full-name-3" class="coop-form__field coop-form__input coop-form__invalid" type="text" autocomplete="name" name="full-name-3" aria-describedby="full-name-3-error">
  </div>
</form>

        
<!-- Input with hint and error message -->
<form id="text-hint-error" class="coop-form" novalidate>
  <h3>Input with hint and error message</h3>

  <div class="coop-form__row">
    <label for="full-name-4" class="coop-form__label">Full name</label>
    <p id="full-name-4-hint" class="coop-form__hint">This is an example hint</p>
    <p id="full-name-4-error" class="coop-form__error">Enter your full name</p>
    <input id="full-name-4" class="coop-form__field coop-form__input coop-form__invalid" type="text" autocomplete="name" name="full-name-4" aria-describedby="full-name-4-hint full-name-4-error">
  </div>
</form>

        

        
<!-- Input with fixed width -->
<form id="text-field" class="coop-form" novalidate>
  <h3>Input with fixed width</h3>

  <div class="coop-form__row">
    <label for="fixed-width-1" class="coop-form__label">1 character width</label>
    <input type="text" name="fixed-width-1" id="fixed-width-1" class="coop-form__field coop-form__field--width-1 coop-form__input">
  </div>

  <div class="coop-form__row">
    <label for="fixed-width-2" class="coop-form__label">2 character width</label>
    <input type="text" name="fixed-width-2" id="fixed-width-2" class="coop-form__field coop-form__field--width-2 coop-form__input">
  </div>

  <div class="coop-form__row">
    <label for="fixed-width-3" class="coop-form__label">3 character width</label>
    <input type="text" name="fixed-width-3" id="fixed-width-3" class="coop-form__field coop-form__field--width-3 coop-form__input">
  </div>

  <div class="coop-form__row">
    <label for="fixed-width-4" class="coop-form__label">4 character width</label>
    <input type="text" name="fixed-width-4" id="fixed-width-4" class="coop-form__field coop-form__field--width-4 coop-form__input">
  </div>

  <div class="coop-form__row">
    <label for="fixed-width-5" class="coop-form__label">5 character width</label>
    <input type="text" name="fixed-width-5" id="fixed-width-5" class="coop-form__field coop-form__field--width-5 coop-form__input">
  </div>

  <div class="coop-form__row">
    <label for="fixed-width-10" class="coop-form__label">10 character width</label>
    <input type="text" name="fixed-width-10" id="fixed-width-10" class="coop-form__field coop-form__field--width-10 coop-form__input">
  </div>

  <div class="coop-form__row">
    <label for="fixed-width-15" class="coop-form__label">15 character width</label>
    <input type="text" name="fixed-width-15" id="fixed-width-15" class="coop-form__field coop-form__field--width-15 coop-form__input">
  </div>

  <div class="coop-form__row">
    <label for="fixed-width-20" class="coop-form__label">20 character width</label>
    <input type="text" name="fixed-width-20" id="fixed-width-20" class="coop-form__field coop-form__field--width-20 coop-form__input">
  </div>

  <div class="coop-form__row">
    <label for="fixed-width-30" class="coop-form__label">30 character width</label>
    <input type="text" name="fixed-width-30" id="fixed-width-30" class="coop-form__field coop-form__field--width-30 coop-form__input">
  </div>
</form>

        

        
<!-- Passwords -->
<form id="passwords" class="coop-form" novalidate>
  <h3>Passwords</h3>

  <div class="coop-form__row">
    <label for="password" class="coop-form__label">Password</label>
    <p id="password-error" class="coop-form__error" hidden></p>
    <input id="password" class="coop-form__field coop-form__input" type="password" autocomplete="new-password" name="password">
  </div>

  <div class="coop-form__row">
    <label for="password-confirm" class="coop-form__label">Confirm password</label>
    <p id="password-confirm-error" class="coop-form__error" hidden></p>
    <input id="password-confirm" class="coop-form__field coop-form__input" type="password" autocomplete="new-password" name="password-confirm">
  </div>

  <div class="coop-form__row">
    <div class="coop-form__choice">
      <input id="password-show-hide" type="checkbox" class="coop-form__field coop-form__checkbox">
      <label for="password-show-hide" class="coop-form__label">Show passwords</label>
    </div>
  </div>
</form>