Input field with button

Actionable Inputs

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 we design them

• An input with button should be a child of a form

How they look

<form >
  <fieldset>
    <div class="gg-c-form__element gg-c-input-with-button">
      <input type="text" name="text" value="" class="gg-c-form__input gg-c-input-with-button__input" placeholder="Placeholder text">
      <button class="gg-c-input-with-button__btn" type="submit">Button</button>
    </div>
  </fieldset>
</form>