Forms

Form Components

Form components used within the style guide.

Append form

A form with a button (or buttons) which is appended to the input element. This component can include multiple buttons. This example has two buttons to show the spacing and how multiple buttons sit together. No more than two buttons should be appended.

<div class="c-append-form">
  <input name="" type="text" placeholder="Default append form">
  <button class="c-btn c-content-form__btn c-btn--danger" type="submit">Search</button>
  <button class="c-btn c-content-form__btn c-btn--danger" type="submit">Search</button>
</div>

Inline block form

Block level inline form which allows this component to fit 100% width of its container. This is used for the autocomplete component and should be preceded by a heading or label element to indicate what the input field is used for.

<div class="c-inline-form c-inline-block-form">
  <input name="" placeholder="Default form and button inline" type="text">
  <div class="c-inline-block-form__controls">
    <button class="c-inline-block-form__controls-button c-btn c-content-form__btn c-btn--danger" type="submit" title="Search the website for this term">Search</button>
  </div>
</div>