ASCE Digital Style Guide

Example
Legend:
Legend:
Legend:
View Markup
<fieldset>
 <legend>Legend:</legend>
 <div class="form-field">
   <label for="">Field label</label>
 </div>
</fieldset>
<fieldset class="form-field radios">
 <legend class="eyebrow">Legend:</legend>
  <div class="radio">
    <input type="radio" id="ex_r1" name="radios" checked>
    <label for="ex_r1">Radio 1 label</label>
  </div>
  <div class="radio">
    <input type="radio" id="ex_r2" name="radios">
    <label for="ex_r2">Radio 2 label</label>
  </div>
</fieldset>
<fieldset class="form-field checks">
  <legend class="eyebrow">Legend:</legend>
  <div class="check">
    <input type="checkbox" id="ex_c1" name="checkboxes" checked>
    <label for="ex_c1">Check 1 label</label>
  </div>
  <div class="check">
    <input type="checkbox" id="ex_c2" name="checkboxes">
    <label for="ex_c2">Check 2 label</label>
  </div>
</fieldset>
Source:global-scss/forms/_forms.scss, line 66

Form Buttons

Requirements:

  • Parent element must have .wufoo-form-asce-container class applied.
  • Class .btn must be applied to the following:
    • <input type='button' value='...'>
    • <input type='submit' value='...'>
    • <input type='reset' value='...'>
Examples

Default

:hover

Hover state

:focus

Focus state

:disabled

Disabled state
View Markup
<fieldset class="wufoo-form-asce-container">
  <input type="button" class="btn {{modifier_class}}" value="Button" />
  <input type="submit" class="btn {{modifier_class}}" value="Submit" />
  <input type="reset" class="btn {{modifier_class}}" value="Reset" />
</fieldset>
Source:global-scss/_buttons.scss, line 282
Example
Legend for checkboxes:
View Markup
<form>
  <fieldset class="form-field checks">
    <legend class="eyebrow">Legend for checkboxes:</legend>
    <div class="check">
      <input type="checkbox" id="c1" name="cb" checked>
      <label for="c1">Option One</label>
    </div>
    <div class="check">
      <input type="checkbox" id="c2" name="cb">
      <label for="c2">Option Two</label>
    </div>
    <div class="check">
      <input type="checkbox" id="c3" name="cb" checked disabled>
      <label for="c3">Option Three (disabled)</label>
    </div>
    <div class="check">
      <input type="checkbox" id="c4" name="cb" disabled>
      <label for="c4">Option Four (disabled)</label>
    </div>
  </fieldset>
</form>
Source:global-scss/forms/_forms.scss, line 538
Example
Legend for radios:
View Markup
<form>
  <fieldset class="form-field radios">
    <legend class="eyebrow">Legend for radios:</legend>
    <div class="radio">
      <input type="radio" id="r1" name="rad" checked>
      <label for="r1">Option One</label>
    </div>
    <div class="radio">
      <input type="radio" id="r2" name="rad">
      <label for="r2">Option Two</label>
    </div>
    <div class="radio">
      <input type="radio" id="r3" name="radch" checked disabled>
      <label for="r3">Option Three (disabled)</label>
    </div>
    <div class="radio">
      <input type="radio" id="r4" name="rad" disabled>
      <label for="r4">Option Four (disabled)</label>
    </div>
  </fieldset>
</form>
Source:global-scss/forms/_forms.scss, line 570
Source:global-scss/forms/_forms.scss, line 157
Examples

Default

:focus

Focus state

:disabled

Disabled state
View Markup
<div class="form-field">
  <label>Number Label</label>
  <input type="number" class="{{modifier_class}}"   placeholder="#" min="0" max="100">
</div>
Source:global-scss/forms/_forms.scss, line 276
Examples

Default

:focus

Focus state

:disabled

Disabled state
View Markup
<div class="form-field">
  <label>Text Input Label</label>
  <input type="text" placeholder="Text Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Email Input Label</label>
  <input type="email" placeholder="Email Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Password Input Label</label>
  <input type="password" placeholder="Password Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Search Input Label</label>
  <input type="search" placeholder="Search Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Telephone Input Label</label>
  <input type="tel" placeholder="Telephone Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>URL Input Label</label>
  <input type="url" placeholder="URL Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Textarea Label</label>
  <textarea class="{{modifier_class}}"   placeholder="Textarea placeholder"></textarea>
</div>
Source:global-scss/forms/_forms.scss, line 161
Examples

Default

:focus

Focus state

:disabled

Disabled state
View Markup
<div class="form-field">
  <label>Date Label</label>
  <input type="date" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Datetime Label</label>
  <input type="datetime-local" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Month Label</label>
  <input type="month" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Time Label</label>
  <input type="time" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Week Label</label>
  <input type="week" class="{{modifier_class}}"  >
</div>
Source:global-scss/forms/_forms.scss, line 353
Examples

Default

:focus

Focus state

:disabled

Disabled state
View Markup
<div class="form-field">
  <label>Range Label</label>
  <input type="range" class="{{modifier_class}}"   value="" min="0" max="100">
</div>
Source:global-scss/forms/_forms.scss, line 455
Examples

Default

:focus

Focus state

:disabled

Disabled state
View Markup
<div class="form-field">
  <label>Select Label</label>
  <select class="{{modifier_class}}"  >
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
</div>
Source:global-scss/forms/_forms.scss, line 484

Required

.is-required – Adds required indicator (), after a label or legend.

  • <fieldset class="is-required"> – applied to legend element
  • <element class="form-field is-required"> – applied to label element when NOT alongside: .radios or .checks
Example
Required fieldset legend
Fieldset legend
Required Legend:
Required Legend:
View Markup
<fieldset class="is-required">
  <legend>Required fieldset legend</legend>
  <div class="form-field">
    <label for="req_fieldset_input">Field label</label>
    <input type="text" id="req_fieldset_input" placeholder="Text Input" required>
  </div>
</fieldset>
<fieldset>
  <legend>Fieldset legend</legend>
  <div class="form-field is-required">
    <label for="req_formfield_input">Required form-field label</label>
    <input type="text" id="req_formfield_input" placeholder="Required Text Input" required>
  </div>
</fieldset>
<fieldset class="form-field radios is-required">
  <legend class="eyebrow">Required Legend:</legend>
  <div class="radio">
    <input type="radio" id="req_ex_r1" name="req-radios" required>
    <label for="req_ex_r1">a radio label</label>
  </div>
  <div class="radio">
    <input type="radio" id="req_ex_r2" name="req-radios" required>
    <label for="req_ex_r2">another radio label</label>
  </div>
</fieldset>
<fieldset class="form-field checks is-required">
  <legend class="eyebrow">Required Legend:</legend>
  <div class="check">
    <input type="checkbox" id="req_ex_c1" name="req-checkboxes" required>
    <label for="req_ex_c1">a check label</label>
  </div>
</fieldset>
Source:global-scss/forms/_forms.scss, line 760

Error Validation

Error validation is performed on the client-side by Hyperform JS. See src/js/form-validation.js for more info or visit Hyperform's documentation here.

Example
Please fill out this field.
Please fill out this field.
Please select an option.
Please fill out this field.
Sign me up for updates:
Please select one of these options.
Agree to terms?
Please check this box if you want to proceed.
View Markup
<form>
  <div class="form-field">
    <label for="test-full-name">Full Name</label>
    <input type="text" id="test-full-name" name="full-name" placeholder="Please enter your full name" required="" class="-validated -invalid">
    <div class="error-message">Please fill out this field.</div>
  </div>
  <div class="form-field">
    <label for="test-email-address">Email Address</label>
    <input type="email" id="test-email-address" name="email-address" placeholder="Please enter your email address" required="" class="-validated -invalid">
    <div class="error-message">Please fill out this field.</div>
  </div>
  <div class="form-field">
    <label for="test-select">Select</label>
    <select id="test-select" name="select" required="" class="-validated -invalid hf-user-invalid">
      <option value="">Select One</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <div class="error-message">Please select an option.</div>
  </div>
  <div class="form-field">
    <label for="test-message">Message</label>
    <textarea id="test-message" name="message" placeholder="Write your message here..." required="" class="-validated -invalid"></textarea>
    <div class="error-message">Please fill out this field.</div>
  </div>
  <fieldset class="form-field radios">
    <legend>Sign me up for updates:</legend>
    <div class="error-message">Please select one of these options.</div>
    <div class="radio">
      <input type="radio" id="test-updates-yes" value="yes" name="updates" required="" class="-validated -invalid">
      <label for="test-updates-yes">Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="test-updates-no" value="no" name="updates" class="-validated -invalid" aria-invalid="true">
      <label for="test-updates-no">No</label>
    </div>
    <div class="radio">
      <input type="radio" id="test-updates-maybe" value="maybe" name="updates" class="-validated -invalid" aria-invalid="true">
      <label for="test-updates-maybe">Maybe So</label>
    </div>
  </fieldset>
  <fieldset class="form-field checks">
    <legend>Agree to terms?</legend>
    <div class="error-message">Please check this box if you want to proceed.</div>
    <div class="check">
      <input type="checkbox" id="test-terms-yes" value="yes" name="test-terms" required="" class="-validated -invalid">
      <label for="test-terms-yes">I agree to the terms &amp; conditions.</label>
    </div>
  </fieldset>
</form>
Source:global-scss/forms/_forms.scss, line 809
Source:global-scss/forms/_forms.scss, line 2

is-required

Adds an after pseudo element to represent/indicate a required field.

Definition
@mixin is-required() {
  &::after {
    display: inline-block;
    position: relative;
    @include rem(font-size, 14px);
    @include font-weight(bold);
    padding-left: .5rem;
    color: $red;
    content: "*";
  }
}
Example Usage
&.is-required {
  selector {
    @include is-required();
  }
}
Compiled Output
&.is-required {
  selector {
    &::after {
      display: inline-block;
      position: relative;
      font-size: 14px;
      font-size: 0.875rem;
      font-weight: 700;
      padding-left: .5rem;
      color: #dc3545;
      content: "*";
    }
  }
}
Example
View Markup
<div class="form-field is-required">
  <label>This is required</label>
</div>
Source:global-scss/forms/_forms.scss, line 8