Patterns: Forms

Based on Bootstrap v4. SCSS.

---

Form controls

We don't currently use checkboxes or radio buttons.

Email address

Example select 1 2 3 4 5

Example multiple select 1 2 3 4 5

Example textarea

<form>
  <div class="form__group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form__control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form__group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form__control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form__group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form__control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form__group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form__control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

---

Small size

Default select Option 2 Option 3

Small select Option 2 Option 3

<p>
  <input class="form__control" type="text" placeholder="Default input">
</p>

<p>
  <input class="form__control form__control--sm" type="text" placeholder="Small input">
</p>

<p>
  <select class="form__control">
    <option>Default select</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</p>

<p>
  <select class="form__control form__control--sm">
    <option>Small select</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</p>

---

Readonly

<p>
  <input class="form__control" type="text" value="Readonly input here…" readonly>
</p>

---

Layout

Form groups

Inputs with labels.

Example label

Another label

<form>
  <div class="form__group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form__control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form__group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form__control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

---

Inline forms

Name Username Submit

Name Username Submit

<form class="form--inline">
  <p>
    <label class="utils-sr-only" for="inlineFormInputName2">Name</label>
    <input type="text" class="form__control" id="inlineFormInputName2" placeholder="Jane Doe">

    <label class="utils-sr-only" for="inlineFormInputUsername2">Username</label>
  <input type="text" class="form__control" id="inlineFormInputUsername2" placeholder="Username">

    <button type="submit" class="button button--primary">Submit</button>
  </p>
</form>

<form class="form--inline">
  <p>
    <label class="utils-sr-only" for="inlineFormInputName2sm">Name</label>
    <input type="text" class="form__control form__control--sm" id="inlineFormInputName2sm" placeholder="Jane Doe">

    <label class="utils-sr-only" for="inlineFormInputUsername2sm">Username</label>
  <input type="text" class="form__control form__control--sm" id="inlineFormInputUsername2sm" placeholder="Username">

    <button type="submit" class="button button--primary button--sm">Submit</button>
  </p>
</form>

---

Help text

Password

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form__control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form__text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

---

Disabled forms

<p>
  <input class="form__control" id="disabledInput" type="text" value="The field value" disabled>
</p>

---

Validation

Email address

Name

Please provide a valid name.

<form>
  <div class="form__group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form__control is-valid" id="exampleFormControlInput1" value="valid@example.com">
  </div>
  <div class="form__group">
    <label for="exampleFormControlInput2">Name</label>
    <input type="text" class="form__control is-invalid" id="exampleFormControlInput2" placeholder="Fred">
     <div class="form__text form__text--invalid">
        Please provide a valid name.
     </div>
  </div>
</form>

---

Buttons

Primary button Secondary button Link button

<p class="form__buttons">
  <button type="button" class="button button--primary">Primary button</button>
  <button type="button" class="button button--secondary">Secondary button</button>
  <button type="button" class="button button--link">Link button</button>
</p>

Button sizes

Small button Small button

<p class="form__buttons">
  <button type="button" class="button button--primary button--sm">Small button</button>
  <button type="button" class="button button--secondary button--sm">Small button</button>
</p>

Disabled state

Primary button Secondary button Link button

<p class="form__buttons">
  <button type="button" class="button button--primary" disabled>Primary button</button>
  <button type="button" class="button button--secondary" disabled>Secondary button</button>
  <button type="button" class="button button--link" disabled>Link button</button>
</p>