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
Is this page helpful?
Thumbs Up Image Yes Thumbs Down Image No
NO THANKS
255 characters maximum 255 characters maximum reached
Thank you for your feedback.
Comments or suggestions?

Top

Back to Header