Component Library

Form 

<form class="iastate22-form" id="myForm" action="#" method="post">
    <div class="form-item">
        <label for="name">Text Input</label>
        <input type="text" name="name" id="name" value="" tabindex="1">
    </div>

    <div class="form-item">
        <label for="name" class="required">Text Input*</label>
        <input type="text" name="name" id="name" value="" tabindex="1" required>
    </div>

    <div class="form-item">
        <label for="name">Text Input
      <span class="optional">(optional)</span>
    </label>
        <input type="text" name="name" id="name" value="" tabindex="1">
    </div>

    <div class="form-item">
        <label for="text-area">Text Area</label>
        <textarea id="text-area"></textarea>
    </div>

    <div class="form-item">
        <label for="select-choice">Select Dropdown Choice</label>
        <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
    </div>

    <div class="form-item">
        <p class="label">Checkbox Label Lorem Ipsum</p>
        <input type="checkbox" id="checkbox1" name="checkbox">
        <label for="checkbox1">Unselected Checkbox</label>
        <br>
        <input type="checkbox" id="checkbox2" name="checkbox">
        <label for="checkbox2">Short Checkbox Label</label>
        <br>
        <input type="checkbox" id="checkbox3" name="checkbox">
        <label for="checkbox3">Medium Checkbox Label Lorem Ipsum Dolor</label>
        <br>
        <input type="checkbox" id="checkbox4" name="checkbox">
        <label for="checkbox4">Very Long Checkbox Label Lorem Ipsum Dolor Sit Amet Sit Lorem</label>
        <br>
        <input type="checkbox" id="checkbox5" name="checkbox" checked>
        <label for="checkbox5">Selected Checkbox</label>
    </div>

    <div class="form-item">
        <p class="label">Radio List Label Lorem Ipsum</p>
        <input type="radio" name="radio" id="radio1" tabindex="2" value="radio1">
        <label for="radio1">Unselected Radio Button</label>
        <br>
        <input type="radio" name="radio" id="radio2" tabindex="2" value="radio1">
        <label for="radio2">Short Radio Button Label</label>
        <br>
        <input type="radio" name="radio" id="radio3" tabindex="2" value="radio1">
        <label for="radio3">Medium Radio Button Label Lorem Ipsum Dolor</label>
        <br>
        <input type="radio" name="radio" id="radio4" tabindex="2" value="radio1">
        <label for="radio4">Very Long Radio Button Label Lorem Ipsum Dolor Sit Amet Sit Lorem</label>
        <br>
        <input type="radio" name="radio" id="radio5" tabindex="2" value="radio1" checked>
        <label for="radio5">Selected Radio Button</label>
    </div>

    <div class="form-item">
        <button type="submit">Submit<span class="arrow"></span>
    </button>
    </div>

</form>

<h2>Inline Form</h2>
<form class="iastate22-form iastate22-form--inline" id="InlineForm" action="#" method="post">
    <div class="form-item">
        <label for="name">Text Input</label>
        <input type="text" name="name" id="name" value="" tabindex="1">
    </div>
    <div class="form-item">
        <label for="name">Text Input</label>
        <input type="text" name="name" id="name" value="" tabindex="1">
    </div>
    <div class="form-item">
        <label for="name">Text Input</label>
        <input type="text" name="name" id="name" value="" tabindex="1">
    </div>
    <div class="form-item">
        <label for="name">Text Input</label>
        <input type="text" name="name" id="name" value="" tabindex="1">
    </div>
    <div class="form-item">
        <label for="select-choice">Select Dropdown Choice</label>
        <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
    </div>
    <div class="form-item">
        <label for="select-choice">Select Dropdown Choice</label>
        <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
    </div>
    <div class="form-item">
        <label for="select-choice">Select Dropdown Choice</label>
        <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
    </div>
    <div class="form-item">
        <label for="select-choice">Select Dropdown Choice</label>
        <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
    </div>
    <div class="form-item">
        <label for="select-choice">Select Dropdown Choice</label>
        <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
    </div>
    <div class="form-item">
        <button type="submit">Submit<span class="arrow"></span>
    </button>
    </div>
</form>
 
<form class="iastate22-form" id="myForm" action="#" method="post">
  <div class="form-item">
    <label for="name">Text Input</label>
    <input type="text" name="name" id="name" value="" tabindex="1">
  </div>

  <div class="form-item">
    <label for="name" class="required">Text Input*</label>
    <input type="text" name="name" id="name" value="" tabindex="1" required>
  </div>

  <div class="form-item">
    <label for="name">Text Input
      <span class="optional">(optional)</span>
    </label>
    <input type="text" name="name" id="name" value="" tabindex="1">
  </div>

  <div class="form-item">
    <label for="text-area">Text Area</label>
    <textarea id="text-area"></textarea>
  </div>

  <div class="form-item">
    <label for="select-choice">Select Dropdown Choice</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>


  <div class="form-item">
    <p class="label">Checkbox Label Lorem Ipsum</p>
    <input type="checkbox" id="checkbox1" name="checkbox">
    <label for="checkbox1">Unselected Checkbox</label>
    <br>
    <input type="checkbox" id="checkbox2" name="checkbox">
    <label for="checkbox2">Short Checkbox Label</label>
    <br>
    <input type="checkbox" id="checkbox3" name="checkbox">
    <label for="checkbox3">Medium Checkbox Label Lorem Ipsum Dolor</label>
    <br>
    <input type="checkbox" id="checkbox4" name="checkbox">
    <label for="checkbox4">Very Long Checkbox Label Lorem Ipsum Dolor Sit Amet Sit Lorem</label>
    <br>
    <input type="checkbox" id="checkbox5" name="checkbox" checked>
    <label for="checkbox5">Selected Checkbox</label>
  </div>

  <div class="form-item">
    <p class="label">Radio List Label Lorem Ipsum</p>
    <input type="radio" name="radio" id="radio1" tabindex="2" value="radio1">
    <label for="radio1">Unselected Radio Button</label>
    <br>
    <input type="radio" name="radio" id="radio2" tabindex="2" value="radio1">
    <label for="radio2">Short Radio Button Label</label>
    <br>
    <input type="radio" name="radio" id="radio3" tabindex="2" value="radio1">
    <label for="radio3">Medium Radio Button Label Lorem Ipsum Dolor</label>
    <br>
    <input type="radio" name="radio" id="radio4" tabindex="2" value="radio1">
    <label for="radio4">Very Long Radio Button Label Lorem Ipsum Dolor Sit Amet Sit Lorem</label>
    <br>
    <input type="radio" name="radio" id="radio5" tabindex="2" value="radio1" checked>
    <label for="radio5">Selected Radio Button</label>
  </div>

  <div class="form-item">
    <button type="submit">Submit<span class="arrow"></span>
    </button>
  </div>

</form>

<h2>Inline Form</h2>
<form class="iastate22-form iastate22-form--inline" id="InlineForm" action="#" method="post">
  <div class="form-item">
    <label for="name">Text Input</label>
    <input type="text" name="name" id="name" value="" tabindex="1">
  </div>
  <div class="form-item">
    <label for="name">Text Input</label>
    <input type="text" name="name" id="name" value="" tabindex="1">
  </div>
  <div class="form-item">
    <label for="name">Text Input</label>
    <input type="text" name="name" id="name" value="" tabindex="1">
  </div>
  <div class="form-item">
    <label for="name">Text Input</label>
    <input type="text" name="name" id="name" value="" tabindex="1">
  </div>
  <div class="form-item">
    <label for="select-choice">Select Dropdown Choice</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
  <div class="form-item">
    <label for="select-choice">Select Dropdown Choice</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
  <div class="form-item">
    <label for="select-choice">Select Dropdown Choice</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
  <div class="form-item">
    <label for="select-choice">Select Dropdown Choice</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
  <div class="form-item">
    <label for="select-choice">Select Dropdown Choice</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
  <div class="form-item">
    <button type="submit">Submit<span class="arrow"></span>
    </button>
  </div>
</form>
 
/* No context defined for this component. */
  • Content: 
    .iastate22-form {
  .form-item {
    margin-bottom: rem(30);
  }

  .form-item .facetwp-icon {
    display: none;
  }

  .form-item .facetwp-facet {
    margin-bottom: 0;
  }
  label,
  .label {
    display: block;
    font-family: $typeface-sans-serif;
    font-size: rem(18);
    line-height: (25 / 18);
    font-weight: 700;
    color: $iastate-maroon;
    margin-bottom: rem(9.8);
    &.required {
      color: $iastate-red;
    }
    .optional {
      font-family: $typeface-sans-serif;
      color: $grey;
      margin-left: rem(15);
    }
  }
  input,
  textarea {
    font-family: $typeface-sans-serif;
    font-size: rem(16);
    font-weight: 400;
    line-height: (29 / 16);
    color: $grey;
    border-radius: 0;
    border: 1px solid $grey;
    padding: rem(8) rem(15);
  }
  input[type="text"],
  textarea {
    width: 100%;
  }
  textarea {
    min-height: rem(177);
  }
  select {
    width: 100%;
    font-family: $typeface-sans-serif;
    font-size: rem(16);
    line-height: (29 / 16);
    color: $grey;
    height: rem(46);
    border-radius: 0;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.273' height='7.551'%3E%3Cpath d='m11.566.707-5.429 5.43L.707.707' fill='none' stroke='%234a4a4a' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center right rem(20);
    background-size: rem(14);
    cursor: pointer;
    padding-left: rem(15);
  }
  input[type="checkbox"],
  input[type="radio"] {
    @extend %visible-for-screen-readers;
    & + label {
      position: relative;
      padding-left: rem(35);
      &:before,
      &:after {
        content: "";
        cursor: pointer;
        position: absolute;
        width: rem(25);
        height: rem(25);
      }
      &:before {
        background: #fff;
        box-shadow: inset 0 0 0 1px $grey;
        top: -2px;
        left: 0;
      }
      &:after {
        background-color: $iastate-maroon;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.854' height='15.2'%3E%3Cpath d='m1.03 8.087 5.117 4.832L14.628.862' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E");
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: rem(14);
        top: -2px;
        left: 0;
        z-index: 1;
        opacity: 0;
        transition: 0.2s opacity ease-in-out;
      }
    }
    &:checked {
      & + label {
        &:after {
          opacity: 1;
        }
      }
    }
  }
  input[type="radio"] {
    & + label {
      &:before,
      &:after {
        border-radius: 50%;
      }
      &:after {
        background-image: none;
        transform: scale(0.7);
      }
    }
  }
  input[type="checkbox"],
  input[type="radio"] {
    & + label {
      display: inline;
      font-family: $typeface-sans-serif;
      font-size: rem(16);
      line-height: (29 / 16);
      color: $grey;
      font-weight: 400;
    }
  }
  button[type="submit"] {
    @extend %iastate22-button;
  }

  // inline form
  &.iastate22-form--inline {
    @include media-breakpoint-up(sm) {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: rem(30);
    }
    .form-item,
    button[type="submit"] {
      @include media-breakpoint-up(sm) {
        margin-block: 0;
      }
    }
  }
}
  • URL: /components/raw/form/_form.scss
  • Filesystem Path: src/components/form/_form.scss
  • Size: 3.4 KB

Form

This is not intended to be output as a component - used mainly to style individual form elements

  • Using custom checkbox and radio buttons
  • Items should be wrapped with <div class="form-item"></div>
  • This is using the markup of <button type="submit">Submit<span class="arrow"></span></button> as the form submit input to achieve our standard button style