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
View demoView code
<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>