Forms and Inputs

Forms allow user interaction and information input. Use these patterns to allow users to enter information, select options, enter searches, etc.

Select

Note: This is a generic dropdown that will vary depending on the browser used. Census.gov uses a custom dropdown that comes from jQuery UI. This was left as the generic version to keep the Pattern Library library agnostic.

<div class="uscb-form-select" style="background-image: url('assets/downward-chevron-teal.svg');">
<select aria-label="Select example">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="American Samoa">American Samoa</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Federated States Of Micronesia">Federated States Of Micronesia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Palau">Palau</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>

 

Top of Section

Text Input

<div class="cmp-form-text" data-cmp-is="formText" data-cmp-required-message="Email address is a required field">

    <label for="form-text-1432238">Email Address&nbsp;*</label>

    

<input class="cmp-form-text__text data-uscb-required-input-text" data-cmp-hook-form-text="input" type="email" id="form-text-1432238" name="email">

<script>

'use strict';

$(document).ready(function(){

var characterLimit = "";

var textID = "form-text-1432238"

if (characterLimit.length) {

$("#" + textID).characterCounter({

charsLimitDisplayId: "charsLimitLabelText-" + textID,

characterLimit: characterLimit

});

}

});

</script>

 

    <!-- Using jQueryUI's datepicker for IE compatibility -->

    <!-- Will only pull in jQueryUI once -->

    

    

        

    

    <p class="data-uscb-textfield-validation" style="font-size: 12px; color: #9B2743; padding-top: 8px; display: none;">Email address is a required field</p>

</div>

Top of Section

Text Area


<form class="uscb-form"> <textarea name="" id="" cols="30" rows="10" aria-label="Text area example"></textarea> </form>

Top of Section

Checkbox

<form> <label class="uscb-checkbox-container">One <input type="checkbox" /> <span class="uscb-checkmark"></span> </label> </form>

Top of Section

Search

Search Census.gov

<form class="uscb-layout-row uscb-search-container uscb-form">
<button class="uscb-icon-button uscb-layout-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-label="Search bar example" role="img">
<path data-name="layer2"
fill="none" stroke="#112E51" stroke-miterlimit="10" stroke-width="2" d="M39.049 39.049L56 56"
stroke-linejoin="round" stroke-linecap="round"></path>
<circle data-name="layer1" cx="27" cy="27" r="17" fill="none" stroke="#112E51"
stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></circle>
</svg>
</button>
<input type="text" placeholder="Search Census.gov"/>
</form>

Top of Section