Input with prefix

Go on, prepend something nice!


Remember, when working with forms, add the aria-describedby attribute, and some helpful text, to allow a seamless experience for everybody.

Keep your form on a white background to enable full contrast ratios for form validation messages.

How they look

Input fields

View demo Open in new window
320 x 568
View code
    <form class="gg-c-form">
  <label for="prefix-example" class="gg-c-form__label">Input with prefix</label>
    <div class="gg-c-form__element">
      <div class="gg-c-input-with-prefix">
      <span class="gg-c-input-with-prefix__prefix">pre</span>
        <input type="text" id="prefix-example" class="gg-c-form__input gg-c-input-with-prefix__input">
        </div>
    </div>
</form>

  

Input validation

View demo Open in new window
320 x 568
View code
    <form class="gg-c-form">
  <label for="prefix-example" class="gg-c-form__label">Input with prefix</label>
    <div class="gg-c-form__element gg-c-form__element--invalid">
      <div class="gg-c-input-with-prefix">
      <span class="gg-c-input-with-prefix__prefix">pre</span>
        <input type="text" id="prefix-example" class="gg-c-form__input gg-c-input-with-prefix__input">
        </div>
         <p class="gg-c-form__element-message gg-c-form__element-message--invalid">An example error message</p>
    </div>
</form>