Input

Make the length of the text input box appropriate for the amount of information needed: do not make it frustratingly short or intimidatingly long.

Example

Example

Input

Input with hint

This is an example hint

Input with error message

Enter your full name

Input with hint and error message

This is an example hint

Enter your full name

Input with fixed width

HTML

                                
<!-- 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>