Movatterモバイル変換

[0]ホーム
URL:

Skip to primary navigationSkip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDAUnited State Department of AgricultureFarm Production and Conservation
FSA Design Systemfsa-style@2.7.3
Get Started

Form Fields

JavaScript Demo Included

Overview

Data entry from a variety of structured form controls.

Preview

 View Kitchen Sink

Create application forms with appropriate instructional and validation features.

This is how people can contact you

Anatomy

<divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-1234">Email address<spanclass="fsa-field__label-desc">Required</span></label><inputclass="fsa-input fsa-field__item"id="lorem-1234"name="lorem-1234"aria-describedby="lorem-1234-help-1"aria-required="true"type="email"value=""><spanclass="fsa-field__help"id="lorem-1234-help-1">This is how people can contact you</span></div>
MarkerSelectorDescriptionRequired
1fsa-field__label
Provide the standard style and position of the label of the form element
 Yes
2fsa-field__label-desc
Paired withfsa-field__label, may be used to indicate Required or Optional fields, or omitted.
 No
3fsa-field__item
Provides standardized style and position for form elements. ExploreUsage andVariants for the variety of form elements available in this space.
 Yes
4fsa-field__help
Provides instructional text in a standardized location
 No, though advised
5fsa-field__message
Provides validation and error messaging in standardized location, e.g.Error state
 No, though advised

Usage

UI Component
Checkbox
Choose one or more options from a set of available values.
UI Component
Buttons
Signal key actions on a page, form, or dialog.
UI Component
Date Picker
Choose a valid formatted date.
UI Component
Radio
Choose a single option from a set of available values.
UI Component
Select
Select a single option from a list.
UI Component
Select Multi
Make one or more selections from structured scrollable list of otpions.
UI Component
Slider
Choose an approximate number from a range.
UI Component
Spinbox
Quickly and accurately input numeric data with enhanced controls.
UI Component
Text Input
Enter any combination of letters, numbers, or symbols for form entry.
UI Component
Textarea
Free-form text entry any combination of letters, numbers, or symbols.

Variants and Examples

Text

UsingText Input as core component.

Instructional message here
<divclass="fsa-field"><labelclass="fsa-field__label"for="TheItem2">Label<spanclass="fsa-field__label-desc">Required</span></label><inputclass="fsa-input fsa-field__item"id="TheItem2"aria-describedby="lorem-1234-help-2"aria-required="true"name="TheItem2"type="text"value=""><spanclass="fsa-field__help"id="lorem-1234-help-2">Instructional message here</span></div>

Text, Fill

Instructional message here
<divclass="fsa-field fsa-field--fill"><labelclass="fsa-field__label"for="TheItem5">Label<spanclass="fsa-field__label-desc">Required</span></label><inputclass="fsa-input fsa-field__item"id="TheItem5"aria-describedby="lorem-1234-help-5"aria-required="true"name="TheItem5"type="text"value=""><spanclass="fsa-field__help"id="lorem-1234-help-5">Instructional message here</span></div>

Text, Prefix

Price of Wheat per bushel
<divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-778affixs459">Wheat<spanclass="fsa-field__label-desc">Required</span></label><spanclass="fsa-affix fsa-affix--fill"><labelfor="lorem-778affixs459"class="fsa-affix__prefix"aria-hidden="true"title="Dollars">$</label><inputclass="fsa-input fsa-field__item fsa-affix__item"id="lorem-778affixs459"name="lorem-778affixs459"type="text"value=""aria-required="true"aria-describedby="lorem-778affixs459_help"></span><spanclass="fsa-field__help"id="lorem-778affixs459_help">Price of Wheat per bushel</span></div>

Text, Prefix Icon

<divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-778affixicons459">Credit Card Number<spanclass="fsa-field__label-desc">Required</span></label><spanclass="fsa-affix fsa-affix--fill"><labelfor="lorem-778affixicons459"class="fsa-affix__prefix"aria-hidden="true"><svgclass="fsa-icon fsa-icon--size-2"aria-hidden="true"focusable="false"role="img"fill="#494440"xmlns="http://www.w3.org/2000/svg"width="24"height="24"viewBox="0 0 24 24"><pathd="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"></path></svg></label><inputclass="fsa-input fsa-field__item fsa-affix__item"id="lorem-778affixicons459"name="lorem-778affixicons459"type="text"value=""aria-required="true"aria-describedby="lorem-778affixicons459_help"></span></div>

Text, Suffix

<divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-778suffixs459">Lot Size<spanclass="fsa-field__label-desc">Required</span></label><spanclass="fsa-affix fsa-affix--fill"><inputclass="fsa-input fsa-field__item fsa-affix__item"id="lorem-778suffixs459"name="lorem-778suffixs459"type="text"value=""aria-required="true"aria-describedby="lorem-778suffixs459_help"><labelfor="lorem-778suffixs459"class="fsa-affix__suffix"aria-hidden="true"title="Dollars">acres</label></span></div>

Multi-part

Example: 05 14 1981
<divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-dob__month">Date of Birth</label><divclass="fsa-level"><div><inputsize="1"class="fsa-input fsa-field__item"id="lorem-dob__month"name="lorem-dob__month"aria-describedby="lorem-dob__help"aria-required="true"type="text"value=""><labelclass="fsa-field__label fsa-text-size--2"for="lorem-dob__month">Month</label></div><div><inputsize="1"class="fsa-input fsa-field__item"id="lorem-dob__day"name="lorem-dob__day"aria-describedby="lorem-dob__help"aria-required="true"type="text"value=""><labelclass="fsa-field__label fsa-text-size--2"for="lorem-dob__day">Day</label></div><div><inputsize="3"class="fsa-input fsa-field__item"id="lorem-dob__year"name="lorem-dob__year"aria-describedby="lorem-dob__help"aria-required="true"type="text"value=""><labelclass="fsa-field__label fsa-text-size--2"for="lorem-dob__year">Year</label></div></div><spanclass="fsa-field__help"id="lorem-dob__help">Example: 05 14 1981</span></div>

Text, Custom Width

The width of.fsa-field’s use of.fsa-input defaults to fill the bounds its parent container (i.e..fsa-field). Though it should berarely necessary, it can be overridden with thesize attribute, which specifies the width of theinput in number of characters. From a display perspective, one character is equivalent to1em (approximately17px wide at default font size).

<divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-0128">Label</label><inputclass="fsa-input fsa-field__item"id="lorem-0128"name="lorem-0128"type="text"value=""size="4"></div><divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-6719">Label</label><inputclass="fsa-input fsa-input--fill fsa-field__item"id="lorem-6719"name="lorem-6719"type="text"value=""size="14"></div>

Textarea

UsingTextarea as core component.

Instructional message here
<divclass="fsa-field"><labelclass="fsa-field__label"for="UNIQUE-ID-88s8SUGg">Label<spanclass="fsa-field__label-desc">Required</span></label><textareaclass="fsa-textarea fsa-field__item"placeholder="Placeholder"id="UNIQUE-ID-88s8SUGg"aria-describedby="lorem-88s8SUGg-help-4"aria-required="true"name="UNIQUE-ID-88s8SUGg"></textarea><spanclass="fsa-field__help"id="lorem-88s8SUGg-help-4">Instructional message here</span></div>

Textarea, Fill

Instructional message here
<divclass="fsa-field fsa-field--fill"><labelclass="fsa-field__label"for="UNIQUE-ID-yyss88xx22x2x2">Label<spanclass="fsa-field__label-desc">Required</span></label><textareaclass="fsa-textarea fsa-field__item fsa-field__item--"placeholder="Placeholder"id="UNIQUE-ID-yyss88xx22x2x2"aria-describedby="lorem-yyss88xx22x2x2-help-4"aria-required="true"name="UNIQUE-ID-yyss88xx22x2x2"></textarea><spanclass="fsa-field__help"id="lorem-yyss88xx22x2x2-help-4">Instructional message here</span></div>

Checkbox List

UsingCheckboxes as core component.

Helpful message here
<divclass="fsa-field"><labelclass="fsa-field__label"id="unique-id-lorem--1234">Pies We Like</label><ulclass="fsa-form-list"aria-labelledby="unique-id-lorem--1234"><li><span><inputclass="fsa-checkbox"id="apple"type="checkbox"name="pie"checked=""><labelfor="apple">Apple</label></span></li><li><span><inputclass="fsa-checkbox"id="key-lime"type="checkbox"name="pie"><labelfor="key-lime">Key Lime</label></span></li><li><span><inputclass="fsa-checkbox"id="pumpkin"type="checkbox"name="pie"><labelfor="pumpkin">Pumpkin</label></span></li></ul><spanclass="fsa-field__help"id="lorem-yywqqq8iyxx2x2-help-8">Helpful message here</span></div>

Radio List

UsingRadio as core component.

Helpful message here
<divclass="fsa-field"><labelclass="fsa-field__label"id="lorem-radio-field-1">Your Favorite Pie</label><ulclass="fsa-form-list"aria-labelledby="lorem-radio-field-1"><li><span><inputclass="fsa-radio"id="apple-radio"type="radio"name="fav-pie-zz99"><labelfor="apple-radio">Apple</label></span></li><li><span><inputclass="fsa-radio"id="key-lime-radio"type="radio"name="fav-pie-zz99"><labelfor="key-lime-radio">Key Lime</label></span></li><li><span><inputclass="fsa-radio"id="pumpkin-radio"type="radio"name="fav-pie-zz99"><labelfor="pumpkin-radio">Pumpkin</label></span></li><li><span><inputclass="fsa-radio"id="none-radio"type="radio"name="fav-pie-zz99"checked><labelfor="none-radio">None of the above</label></span></li></ul><spanclass="fsa-field__help"id="lorem-yyss8cytr2x2x2-help-9">Helpful message here</span></div>

Select

UsingSelect as core component.

Instructional message here
<divclass="fsa-field"><labelclass="fsa-field__label"for="UNIQUE-ID-hshhsjtext">Label<spanclass="fsa-field__label-desc">Required</span></label><selectclass="fsa-select fsa-field__item"id="UNIQUE-ID-hshhsjtext"aria-describedby="lorem-hshhsjtext-help-4"aria-required="true"name="UNIQUE-ID-hshhsjtext"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select><spanclass="fsa-field__help"id="lorem-hshhsjtext-help-4">Instructional message here</span></div>

Select, Fill Variant

Instructional message here
<divclass="fsa-field fsa-field--fill"><labelclass="fsa-field__label"for="UNIQUE-ID-ssrrppou9">Label<spanclass="fsa-field__label-desc">Required</span></label><selectclass="fsa-select fsa-field__item"id="UNIQUE-ID-ssrrppou9"aria-describedby="lorem-ssrrppou9-help-4"aria-required="true"name="UNIQUE-ID-ssrrppou9"><optionvalue="Option A"selected="selected">Option A</option><optionvalue="Option B">Option B</option><optionvalue="Option C">Option C</option><optionvalue="Option D">Option D</option><optionvalue="Option E">Option E</option></select><spanclass="fsa-field__help"id="lorem-ssrrppou9-help-4">Instructional message here</span></div>

Select Multi

UsingSelect Multi as core component.

  • First Group
  • Second Group
  • Third Group
Instructional message here
<divclass="fsa-field"><labelclass="fsa-field__label"for="UNIQUE-ID-hshhsjtext">Label</label><divclass="fsa-select-multi fsa-field__item"><ulclass="fsa-select-multi__list"><liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4">        First Group</li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_one"type="checkbox"name="opt-group-example_one"value="One"checked=""><labelclass="fsa-select-multi__label"for="opt-group-example_one">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_two"type="checkbox"name="opt-group-example_two"value="Two"><labelclass="fsa-select-multi__label"for="opt-group-example_two">Two</label></li><liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4">        Second Group</li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplehree"type="checkbox"name="opt-group-examplehree"value="Three"checked=""><labelclass="fsa-select-multi__label"for="opt-group-examplehree">Three</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefour"type="checkbox"name="opt-group-examplefour"value="Four"checked=""><labelclass="fsa-select-multi__label"for="opt-group-examplefour">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefive"type="checkbox"name="opt-group-examplefive"value="Five"><labelclass="fsa-select-multi__label"for="opt-group-examplefive">Five</label></li><liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4">        Third Group</li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_six"type="checkbox"name="opt-group-example_six"value="Six"><labelclass="fsa-select-multi__label"for="opt-group-example_six">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleeven"type="checkbox"name="opt-group-exampleeven"value="Seven"><labelclass="fsa-select-multi__label"for="opt-group-exampleeven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleight"type="checkbox"name="opt-group-exampleight"value="Eight"><labelclass="fsa-select-multi__label"for="opt-group-exampleight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplenine"type="checkbox"name="opt-group-examplenine"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplenine">Nine</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleten"type="checkbox"name="opt-group-exampleten"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-exampleten">Ten</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleeleven"type="checkbox"name="opt-group-exampleeleven"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-exampleeleven">Eleven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampletwelve"type="checkbox"name="opt-group-exampletwelve"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-exampletwelve">Twelve</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplethirteen"type="checkbox"name="opt-group-examplethirteen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplethirteen">Thirteen</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefourteen"type="checkbox"name="opt-group-examplefourteen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplefourteen">Fourteen</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefifteen"type="checkbox"name="opt-group-examplefifteen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplefifteen">Fifteen</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplesixteen"type="checkbox"name="opt-group-examplesixteen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplesixteen">Sixteen</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleseventeen"type="checkbox"name="opt-group-exampleseventeen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-exampleseventeen">Seventeen</label></li></ul></div><spanclass="fsa-field__help"id="lorem-hshhsjtext-help-4">Instructional message here</span></div>

Select Multi, Fill Variant

Instructional message here
<divclass="fsa-field fsa-field--fill"><labelclass="fsa-field__label"for="UNIQUE-ID-hshmul6tihsjt">Label</label><divclass="fsa-select-multi fsa-field__item"><ulclass="fsa-select-multi__list"id="UNIQUE-ID-hshmul6tihsjt"aria-describedby="lorem-hshmul6tihsjt-help-4"><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_one"type="checkbox"name="default-t9kstp31a_one"value="One"checked=""><labelclass="fsa-select-multi__label"for="default-t9kstp31a_one">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_two"type="checkbox"name="default-t9kstp31a_two"value="Two"><labelclass="fsa-select-multi__label"for="default-t9kstp31a_two">Two</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_three"type="checkbox"name="default-t9kstp31a_three"value="Three"checked=""><labelclass="fsa-select-multi__label"for="default-t9kstp31a_three">Three</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_four"type="checkbox"name="default-t9kstp31a_four"value="Four"checked=""><labelclass="fsa-select-multi__label"for="default-t9kstp31a_four">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_five"type="checkbox"name="default-t9kstp31a_five"value="Five"><labelclass="fsa-select-multi__label"for="default-t9kstp31a_five">Five</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_six"type="checkbox"name="default-t9kstp31a_six"value="Six"><labelclass="fsa-select-multi__label"for="default-t9kstp31a_six">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_seven"type="checkbox"name="default-t9kstp31a_seven"value="Seven"><labelclass="fsa-select-multi__label"for="default-t9kstp31a_seven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_eight"type="checkbox"name="default-t9kstp31a_eight"value="Eight"><labelclass="fsa-select-multi__label"for="default-t9kstp31a_eight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-t9kstp31a_nine"type="checkbox"name="default-t9kstp31a_nine"value="Nine"><labelclass="fsa-select-multi__label"for="default-t9kstp31a_nine">Nine</label></li></ul></div><spanclass="fsa-field__help"id="lorem-hshmul6tihsjt-help-4">Instructional message here</span></div>

Date Picker

UsingDate Picker as core component.

Example 05/14/1975
<divclass="fsa-field"><labelclass="fsa-field__label"for="date-picker-default">Start Date</label><inputplaceholder="mm/dd/yyyy"class="fsa-input fsa-field__item"id="date-picker-default"aria-describedby="date-picker-default__help"aria-required="true"name="date-picker-default"type="text"value=""><spanclass="fsa-field__help"id="date-picker-default__help">Example 05/14/1975</span></div>

Spinbox

UsingSpinbox as core component.

Instructional message here
<divclass="fsa-field"><labelclass="fsa-field__label"for="UNIQUE-ID-spinsa22">Label</label><divclass="fsa-spinbox fsa-field__item"><divclass="fsa-spinbox__number"><inputclass="fsa-input fsa-spinbox__input"type="number"value="10"id="UNIQUE-ID-spinsa22"aria-describedby="UNIQUE-ID-spinsa22-help"name="UNIQUE-ID-spinsa22"></div><divclass="fsa-spinbox__actions"aria-hidden="true"><buttontabindex="-1"class="fsa-spinbox__btn fsa-spinbox__btn--increment"type="button"data-behavior="spinbox-spin"title="Increase"></button><buttontabindex="-1"class="fsa-spinbox__btn fsa-spinbox__btn--decrement"type="button"data-behavior="spinbox-spin"title="Decrease"></button></div></div><spanclass="fsa-field__help"id="UNIQUE-ID-spinsa22-help">Instructional message here</span></div>

Spinbox, Fill Variant

Instructional message here
<divclass="fsa-field fsa-field--fill"><labelclass="fsa-field__label"for="UNIQUE-ID-spinsawsqz">Label</label><divclass="fsa-spinbox fsa-field__item"><divclass="fsa-spinbox__number"><inputclass="fsa-input fsa-spinbox__input"type="number"value="10"id="UNIQUE-ID-spinsawsqz"aria-describedby="UNIQUE-ID-spinsawsqz-help"name="UNIQUE-ID-spinsawsqz"></div><divclass="fsa-spinbox__actions"aria-hidden="true"><buttontabindex="-1"class="fsa-spinbox__btn fsa-spinbox__btn--increment"type="button"data-behavior="spinbox-spin"title="Increase"></button><buttontabindex="-1"class="fsa-spinbox__btn fsa-spinbox__btn--decrement"type="button"data-behavior="spinbox-spin"title="Decrease"></button></div></div><spanclass="fsa-field__help"id="UNIQUE-ID-spinsawsqz-help">Instructional message here</span></div>

Upload File

Accepted file types: PNG, JPG, GIF
<divclass="fsa-field"><labelclass="fsa-field__label"for="uploadexample02020">Upload image preview</label><inputplaceholder="Choosie choose choose something"accept="image/png, image/jpeg, image/gif"multipleclass="fsa-input fsa-field__item"id="uploadexample02020"aria-describedby="lorem-1234-02020"aria-required="true"name="uploadexample02020"type="file"value=""><spanclass="fsa-field__help"id="lorem-1234-02020">Accepted file types: PNG, JPG, GIF</span></div>

Slider

Using theSlider as core component.

90
<divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-range-7710">Label<spanclass="fsa-field__label-desc">Required</span></label><divclass="fsa-level"><spanclass="fsa-level__item--grow-auto"><inputclass="fsa-slider fsa-field__item"id="lorem-range-7710"name="lorem-range-7710"type="range"min="0"max="100"value="90"step="1"></span><span><outputid="lorem-range-ouput-7710"name="lorem-range-ouput-7710"for="lorem-range-7710">90</output></span></div></div>

Progressive Disclosure, or “Other”

A UI Pattern for revealing an additional form field upon selection of an “Other” option (though actual label can of course be something other than… um… “other”).

Radio

DEMO: Choose"Other" from the radio list below.

<divclass="fsa-field"><labelclass="fsa-field__label"id="lorem-radio-field-33aa">Your Favorite Pie</label><ulclass="fsa-form-list"aria-labelledby="lorem-radio-field-33aa"><li><span><inputclass="fsa-radio"id="apple-radio-33aa"type="radio"name="fav-pie"><labelfor="apple-radio-33aa">Apple</label></span></li><li><span><inputclass="fsa-radio"id="key-lime-radio-33aa"type="radio"name="fav-pie"><labelfor="key-lime-radio-33aa">Key Lime</label></span></li><li><span><inputclass="fsa-radio"id="pumpkin-radio-33aa"type="radio"name="fav-pie"><labelfor="pumpkin-radio-33aa">Pumpkin</label></span></li><li><div><inputclass="fsa-radio"id="none-radio-33aa"type="radio"name="fav-pie"><labelfor="none-radio-33aa">Other</label><divclass="fsa-radio__other"><inputclass="fsa-input fsa-input--fill"type="text"name="loremasdfas"value=""placeholder="e.g. Strawberry"aria-label="Other Favorite Pie"></div></div></li></ul></div>

Checkbox

DEMO: Choose"Other" from the checkbox list below.

<divclass="fsa-field"><labelclass="fsa-field__label"id="unique-id-lorem--eezz">Fruit Pies you like</label><ulclass="fsa-form-list"aria-labelledby="unique-id-lorem--eezz"><li><inputclass="fsa-checkbox"id="apple-pie_2-eezz"type="checkbox"name="boat-pie_2-eezz"value="apple-pie_2-eezz"checked=""><labelfor="apple-pie_2-eezz">Apple</label></li><li><inputclass="fsa-checkbox"id="key-lime-pie_2-eezz"type="checkbox"name="boat-pie_2-eezz"value="key-lime-pie_2-eezz"><labelfor="key-lime-pie_2-eezz">Key Lime</label></li><li><inputclass="fsa-checkbox"id="pumpkin-pie_2-eezz"type="checkbox"name="boat-pie_2-eezz"value="pumpkin-pie_2-eezz"disabled=""><labelfor="pumpkin-pie_2-eezz">Pumpkin</label></li><li><inputclass="fsa-checkbox"id="other-pie_2-eezz"type="checkbox"name="boat-pie_2-eezz"value="other-pie_2-eezz"><labelfor="other-pie_2-eezz">Other</label><divclass="fsa-checkbox__other"><inputclass="fsa-input fsa-input--fill"type="text"name="-eezz-eezz-eezz-eezz"value=""placeholder="e.g. Strawberry"aria-label="Other Fruit Pie you like"id="other-pie_9-eezz"></div></li></ul></div>

Checkbox, withtextarea

DEMO: Choose"Other" from the checkbox list below.

<divclass="fsa-field"><labelclass="fsa-field__label">Hobbies</label><ulclass="fsa-form-list"><li><inputclass="fsa-checkbox"id="hobby-photography"type="checkbox"name="boat-pie_3"value="hobby-photography"checked=""><labelfor="hobby-photography">Photography</label></li><li><inputclass="fsa-checkbox"id="hobby-cooking"type="checkbox"name="boat-pie_3"value="hobby-cooking"><labelfor="hobby-cooking">Cooking</label></li><li><inputclass="fsa-checkbox"id="hobby-other"type="checkbox"name="boat-pie_3"value="hobby-other"><labelfor="hobby-other">Other</label><divclass="fsa-checkbox__other"><textareaclass="fsa-textarea"name="1324hgxi"placeholder=""aria-label="Other"aria-label="Other Hobbies">Long walks on the beach, surfing, mountain biking, carpentry</textarea></div></li></ul></div>

Select

DEMO: Choose"Other" from the<select> below.

Where does your loyalty lie?
<divclass="fsa-field"><labelclass="fsa-field__label"for="lorem-beisbol-993">Team<spanclass="fsa-field__label-desc">Optional</span></label><selectclass="fsa-select fsa-field__item"id="lorem-beisbol-993"name="lorem-beisbol-993"data-behavior="select-other-demo"data-target="select-other-target"><optionvalue=""></option><optionvalue="Los Angeles Angels of Anaheim">Los Angeles Angels of Anaheim</option><optionvalue="Kansas City Royals">Kansas City Royals</option><optionvalue="Los Angeles Dodgers">Los Angeles Dodgers</option><optionvalue="San Diego Padres">San Diego Padres</option><optionvalue="Mudville Nine">Mudville Nine</option><optionvalue="other">Other</option></select><divclass="fsa-select__other"id="select-other-target"aria-hidden="true"hidden><inputclass="fsa-input fsa-input--fill"type="text"name="asdfasdf"value=""aria-label="Other team name"></div><spanclass="fsa-field__help">Where does your loyalty lie?</span></div>

Single Column Example

In general, FPAC applications should use a single column layout. There are instances when a two or multi-column layout is appropriate as determined based on the complexity and groupings of the form fields and product requirements.

Customer Name

Example: Doe
Instructional message here

Customer Tax ID

Tax IDs are 8 characters, alphanumeric
You may choose a type other than the default, Social Security Number (SSN)
<fieldset><h3class="fsa-m-t--none">Customer Name</h3><divclass="fsa-field"><labelclass="fsa-field__label"id="lorem-radio-field-1">Name Match</label><ulclass="fsa-form-list"aria-labelledby="lorem-radio-field-1"><li><span><inputclass="fsa-radio"id="pumpkin-radio"type="radio"name="fav-pie-zz99"checked><labelfor="pumpkin-radio">Starts with</label></span></li><li><span><inputclass="fsa-radio"id="none-radio"type="radio"name="fav-pie-zz99"><labelfor="none-radio">Exact Match</label></span></li></ul></div><divclass="fsa-field"><labelclass="fsa-field__label"for="TheItem2">Last name or Business Name<spanclass="fsa-field__label-desc">Required</span></label><inputclass="fsa-input fsa-field__item"id="TheItem2"aria-describedby="lorem-1234-help-9"name="TheItem2"type="text"value=""><spanclass="fsa-field__help"id="lorem-1234-help-9">Example: Doe</span></div><divclass="fsa-field"><labelclass="fsa-field__label"for="TheItem2q5">First Name</label><inputclass="fsa-input fsa-field__item"id="TheItem2q5"aria-describedby="lorem-1234-help-24369"name="TheItem2q5"type="text"value=""><spanclass="fsa-field__help"id="lorem-1234-help-24369">Instructional message here</span></div></fieldset><fieldset><h3class="fsa-m-t--none">Customer Tax ID</h3><divclass="fsa-field"><labelclass="fsa-field__label"for="TheItem8">Tax ID<spanclass="fsa-field__label-desc">Required</span></label><inputclass="fsa-input fsa-field__item"id="TheItem8"aria-describedby="lorem-1234-help-8"aria-required="true"name="TheItem8"type="text"value=""><spanclass="fsa-field__help"id="lorem-1234-help-8">Tax IDs are 8 characters, alphanumeric</span></div><divclass="fsa-field"><labelclass="fsa-field__label"id="lorem-radio-field-9852">Tax ID Search Length</label><ulclass="fsa-form-list"aria-labelledby="lorem-radio-field-9852"><li><span><inputclass="fsa-radio"id="sdfa24tgg-radio"type="radio"name="fav-pie-333333gha"checked><labelfor="sdfa24tgg-radio">Whole ID</label></span></li><li><span><inputclass="fsa-radio"id="egh5a-radio"type="radio"name="fav-pie-333333gha"><labelfor="egh5a-radio">Last 4 digits</label></span></li></ul></div><divclass="fsa-field"><labelclass="fsa-field__label"for="UNIQUE-ID-h24rg8">Tax ID Type</label><selectclass="fsa-select fsa-field__item"id="UNIQUE-ID-h24rg8"name="UNIQUE-ID-h24rg8"aria-describedby="lorem-hshhsjtext-help-4"><optionvalue="SSN"selected>Social Security Number (SSN)</option><optionvalue="EIN">Employer Identification Number (EIN)</option><optionvalue="ITIN">Individual Taxpayer Identification Number (ITIN)</option><optionvalue="ATIN">Taxpayer Identification Number for Pending U.S. Adoptions (ATIN)</option><optionvalue="PTIN">Preparer Taxpayer Identification Number (PTIN)</option></select><spanclass="fsa-field__help"id="lorem-hshhsjtext-help-4">You may choose a type other than the default, Social Security Number (SSN)</span></div></fieldset><divclass="fsa-field fsa-level"><buttontype="submit"class="fsa-btn fsa-btn--primary">Search Profiles</button><buttontype="button"class="fsa-btn fsa-btn--flat">Cancel</button></div>

Two Column Example

Using the responsiveGrid System, the form below is two columns when the viewport is wider thanL and single column when narrower.

Customer Name

Example: Doe
Instructional message here

Customer Tax ID

Tax IDs are 8 characters, alphanumeric
You may choose a type other than the default, Social Security Number (SSN)
<divclass="fsa-grid"><divclass="fsa-grid__1 fsa-grid__1/2@l"><fieldset><h3class="fsa-m-t--none">Customer Name</h3><divclass="fsa-field"><labelclass="fsa-field__label"id="2-column-example__lorem-radio-field-1">Name Match</label><ulclass="fsa-form-list"aria-labelledby="2-column-example__lorem-radio-field-1"><li><span><inputclass="fsa-radio"id="2-column-example__pumpkin-radio"type="radio"name="2-column-example__fav-pie-zz99"checked><labelfor="2-column-example__pumpkin-radio">Starts with</label></span></li><li><span><inputclass="fsa-radio"id="2-column-example__none-radio"type="radio"name="2-column-example__fav-pie-zz99"><labelfor="2-column-example__none-radio">Exact Match</label></span></li></ul></div><divclass="fsa-field"><labelclass="fsa-field__label"for="2-column-example__TheItem2">Last name or Business Name<spanclass="fsa-field__label-desc">Required</span></label><inputclass="fsa-input fsa-field__item"id="2-column-example__TheItem2"aria-describedby="2-column-example__lorem-1234-help-9"name="2-column-example__TheItem2"type="text"value=""><spanclass="fsa-field__help"id="2-column-example__lorem-1234-help-9">Example: Doe</span></div><divclass="fsa-field"><labelclass="fsa-field__label"for="2-column-example__TheItem2q5">First Name</label><inputclass="fsa-input fsa-field__item"id="2-column-example__TheItem2q5"aria-describedby="2-column-example__lorem-1234-help-24369"name="2-column-example__TheItem2q5"type="text"value=""><spanclass="fsa-field__help"id="2-column-example__lorem-1234-help-24369">Instructional message here</span></div></fieldset></div><divclass="fsa-grid__1 fsa-grid__1/2@l"><fieldset><h3class="fsa-m-t--none">Customer Tax ID</h3><divclass="fsa-field"><labelclass="fsa-field__label"for="2-column-example__TheItem8">Tax ID<spanclass="fsa-field__label-desc">Required</span></label><inputclass="fsa-input fsa-field__item"id="2-column-example__TheItem8"aria-describedby="2-column-example__lorem-1234-help-8"aria-required="true"name="2-column-example__TheItem8"type="text"value=""><spanclass="fsa-field__help"id="2-column-example__lorem-1234-help-8">Tax IDs are 8 characters, alphanumeric</span></div><divclass="fsa-field"><labelclass="fsa-field__label"id="2-column-example__lorem-radio-field-9852">Tax ID Search Length</label><ulclass="fsa-form-list"aria-labelledby="2-column-example__lorem-radio-field-9852"><li><span><inputclass="fsa-radio"id="2-column-example__sdfa24tgg-radio"type="radio"name="2-column-example__fav-pie-333333gha"checked><labelfor="2-column-example__sdfa24tgg-radio">Whole ID</label></span></li><li><span><inputclass="fsa-radio"id="2-column-example__egh5a-radio"type="radio"name="2-column-example__fav-pie-333333gha"><labelfor="2-column-example__egh5a-radio">Last 4 digits</label></span></li></ul></div><divclass="fsa-field"><labelclass="fsa-field__label"for="2-column-example__UNIQUE-ID-h24rg8">Tax ID Type</label><selectclass="fsa-select fsa-field__item"id="2-column-example__UNIQUE-ID-h24rg8"name="2-column-example__UNIQUE-ID-h24rg8"aria-describedby="2-column-example__lorem-hshhsjtext-help-4"><optionvalue="SSN"selected>Social Security Number (SSN)</option><optionvalue="EIN">Employer Identification Number (EIN)</option><optionvalue="ITIN">Individual Taxpayer Identification Number (ITIN)</option><optionvalue="ATIN">Taxpayer Identification Number for Pending U.S. Adoptions (ATIN)</option><optionvalue="PTIN">Preparer Taxpayer Identification Number (PTIN)</option></select><spanclass="fsa-field__help"id="2-column-example__lorem-hshhsjtext-help-4">You may choose a type other than the default, Social Security Number (SSN)</span></div></fieldset></div></div><divclass="fsa-field fsa-level"><buttontype="submit"class="fsa-btn fsa-btn--primary">Search Profiles</button><buttontype="button"class="fsa-btn fsa-btn--flat">Cancel</button></div>

States

All variants above have error states available by the addition offsa-field--error, and will likely be paired with anfsa-field__message to provide clarity to the field’s requirements.

Additionally, eachcore nested component may have additional selectors to denote an error state, e.g.fsa-textarea--error.

Error

Instructional message hereHelpful error message here
<divclass="fsa-field fsa-field--error"><labelclass="fsa-field__label"for="TheItem6">Label<spanclass="fsa-field__label-desc">Required</span></label><inputclass="fsa-input fsa-field__item fsa-input--error"id="TheItem6"aria-describedby="lorem-1234-help-6 lorem-1234-message-6"aria-required="true"name="TheItem6"type="text"value=""><spanclass="fsa-field__help"id="lorem-1234-help-6">Instructional message here</span><spanclass="fsa-field__message"id="lorem-1234-message-6"role="alert">Helpful error message here</span></div>

Error, specific column

State is required
<divclass="fsa-field fsa-field--columns fsa-field--error"><divclass="fsa-grid"><divclass="fsa-grid__1 fsa-grid__2/3@m"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="city">City</label><inputclass="fsa-input fsa-field__item"id="city"name="city"type="text"value="Carpinteria"></div></div><divclass="fsa-grid__1 fsa-grid__1/3@m"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="st">State</label><selectclass="fsa-select fsa-select--error fsa-field__item"aria-describedby="st--message"id="st"name="st"><optionvalue=""selected></option><optionvalue="Alabama">AL</option><optionvalue="Alaska">AK</option><optionvalue="Arizona">AZ</option><optionvalue="Arkansas">AR</option></select><spanclass="fsa-field__message"id="st--message"role="alert">State is required</span></div></div></div></div>

Error, multi-part

Example: 05 14 1981"32" is an invalid dayYear is required
<divclass="fsa-field fsa-field--error"><labelclass="fsa-field__label"for="ipsum-dob__month">Date of Birth</label><divclass="fsa-level"><div><inputsize="1"class="fsa-input fsa-field__item"id="ipsum-dob__month"name="ipsum-dob__month"aria-describedby="ipsum-dob__help"aria-required="true"type="text"value="05"><labelclass="fsa-field__label fsa-text-size--2"for="ipsum-dob__month">Month</label></div><div><inputsize="1"class="fsa-input fsa-input--error fsa-field__item"id="ipsum-dob__day"name="ipsum-dob__day"aria-describedby="ipsum-dob__help ipsum-dob__error-1"aria-required="true"type="text"value="32"><labelclass="fsa-field__label fsa-text-size--2"for="ipsum-dob__day">Day</label></div><div><inputsize="3"class="fsa-input fsa-input--error fsa-field__item"id="ipsum-dob__year"name="ipsum-dob__year"aria-describedby="ipsum-dob__help ipsum-dob__error-2"aria-required="true"type="text"value=""><labelclass="fsa-field__label fsa-text-size--2"for="ipsum-dob__year">Year</label></div></div><spanclass="fsa-field__help"id="ipsum-dob__help">Example: 05 14 1981</span><spanclass="fsa-field__message"id="ipsum-dob__error-1"role="alert">"32" is an invalid day</span><spanclass="fsa-field__message"id="ipsum-dob__error-2"role="alert">Year is required</span></div>

Column Structure

By usingfsa-field--columns paired with use of theGrid System, you can define a consistant column structure for larger screens, while stacking on smaller screens (e.g. mobile phones).

Example

Resize browser or view on handheld devices to view responsive behavior.

<divclass="fsa-field fsa-field--fill fsa-field--columns"><divclass="fsa-grid"><divclass="fsa-grid__1 fsa-grid__3/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-555s">Label 1A</label><inputclass="fsa-input fsa-field__item"id="lorem-555s"name="lorem-555s"type="text"value=""></div></div><divclass="fsa-grid__1 fsa-grid__3/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-3344">Label 2A</label><inputclass="fsa-input fsa-field__item"id="lorem-3344"name="lorem-3344"type="text"value=""></div></div><divclass="fsa-grid__1 fsa-grid__6/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-9915">Label 3A</label><selectclass="fsa-select fsa-field__item"id="lorem-9915"name="lorem-9915"><optionvalue=""selected>- Select a lorem -</option><optionvalue="Ipsum">Ipsum</option><optionvalue="Dolor">Dolor</option><optionvalue="Sit">Sit</option><optionvalue="Amet">Amet</option><optionvalue="Consecutar">Consecutar</option></select></div></div></div></div><divclass="fsa-field fsa-field--fill fsa-field--columns"><divclass="fsa-grid"><divclass="fsa-grid__1 fsa-grid__3/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-6459">Label 1B</label><inputclass="fsa-input fsa-field__item"id="lorem-6459"name="lorem-6459"type="text"value=""></div></div><divclass="fsa-grid__1 fsa-grid__3/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-6543">Label 2B</label><inputclass="fsa-input fsa-field__item"id="lorem-6543"name="lorem-6543"type="text"value=""></div></div><divclass="fsa-grid__1 fsa-grid__6/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-0892">Label 3B</label><selectclass="fsa-select fsa-field__item"id="lorem-0892"name="lorem-0892"><optionvalue=""selected>- Select a lorem -</option><optionvalue="Ipsum">Ipsum</option><optionvalue="Dolor">Dolor</option><optionvalue="Sit">Sit</option><optionvalue="Amet">Amet</option><optionvalue="Consecutar">Consecutar</option></select></div></div></div></div>

Error, specific row and column

Helpful error message
<divclass="fsa-field fsa-field--fill fsa-field--columns fsa-field--error"><divclass="fsa-grid"><divclass="fsa-grid__1 fsa-grid__3/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-4705">Label 1A</label><inputclass="fsa-input fsa-field__item"id="lorem-4705"name="lorem-4705"type="text"value=""></div></div><divclass="fsa-grid__1 fsa-grid__3/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-3294">Label 2A</label><inputclass="fsa-input fsa-input--error fsa-field__item"aria-describedby="lorem-3294--error-message"id="lorem-3294"name="lorem-3294"type="text"value=""><spanclass="fsa-field__message"id="lorem-3294--error-message"role="alert">Helpful error message</span></div></div><divclass="fsa-grid__1 fsa-grid__6/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-9235">Label 3A</label><selectclass="fsa-select fsa-field__item"id="lorem-9235"name="lorem-9235"><optionvalue=""selected>- Select a lorem -</option><optionvalue="Ipsum">Ipsum</option><optionvalue="Dolor">Dolor</option><optionvalue="Sit">Sit</option><optionvalue="Amet">Amet</option><optionvalue="Consecutar">Consecutar</option></select></div></div></div></div><divclass="fsa-field fsa-field--fill fsa-field--columns"><divclass="fsa-grid"><divclass="fsa-grid__1 fsa-grid__3/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-6556">Label 1B</label><inputclass="fsa-input fsa-field__item"id="lorem-6556"name="lorem-6556"type="text"value=""></div></div><divclass="fsa-grid__1 fsa-grid__3/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-3343">Label 2B</label><inputclass="fsa-input fsa-field__item"id="lorem-3343"name="lorem-3343"type="text"value=""></div></div><divclass="fsa-grid__1 fsa-grid__6/12@s"><divclass="fsa-field__column"><labelclass="fsa-field__label"for="lorem-0222">Label 3B</label><selectclass="fsa-select fsa-field__item"id="lorem-0222"name="lorem-0222"><optionvalue=""selected>- Select a lorem -</option><optionvalue="Ipsum">Ipsum</option><optionvalue="Dolor">Dolor</option><optionvalue="Sit">Sit</option><optionvalue="Amet">Amet</option><optionvalue="Consecutar">Consecutar</option></select></div></div></div></div>

Form Validation Guidelines

Common themes that should be followed when developing a validation and messaging system that will help to optimize the workflow of a User. This allows for a more positive User Experience when an system or User error has taken place.

  1. Display error messages at the right place - Proper error messaging should appear as close as possible to the area of the application where the error has taken place. Always display validation within the context of the action. If an error has occurred, for instance, from a User typing the wrong format of characters into an online form field, the error message shall appear below the form field. Grouping of form error messages at the top or bottom of the form and away from the pertaining form fields shall not be done.
  2. Display error messages at the right time - It is also important for the error message to appear in a timely manner, so that the User is still in the proper mindset for completing the task. Error messages shall appear when the action has been completed. So in the instance of wrong format of characters in an online form field, when the form field loses focus the error message shall appear.
  3. Use the appropriate color for the message - Generally speaking, it is best practice to use the color red, paired with error text messaging to indicated something needs to be corrected to continue. In the case of confirmation or success messaging, the color green, paired with success text messaging should be used. Based on the location and background color of the area of the error, consideration of 508 compliance shall still be used.
  4. Use clear language and provide an actionable resolution - The verbiage used when notifying a User of an error should be easy to understand and provide a way to solve the problem. Even if the error messaging is placed in the right spot at the right time, and in the right color scheme, it serves no purpose if the User does not understand how to correct the problem. FPAC applications shall useplain language priciples when displaying validation messaging.

General Guidance

  • The length of the text input provides a hint to users as to how much text to write. Do not require users to write paragraphs of text into a single-line input box; use atextarea instead.
  • Text inputs are among the easiest type of input for desktop users but are more difficult for mobile users.
  • Consider the type of content a user may enter to aid mobile device entry; mobile devices typically surface a keyboard UI attuned to the type. For example,type="tel" will surface aphone keyboard.
  • Only show error validation messages or styling after a user has interacted with a particular field; avoid significantly updating styles while a user is actively entering input.
  • Do not use theplaceholder attribute in place of a<label> element. Its purposes is different: the standard<label> describes the role of the form element; that is, it indicates what kind of information is expected. Theplaceholder attribute is typically a hint about the format the content should take. There are cases in which the placeholder attribute is not displayed to the user (e.g. when input field has a value), so the form must be understandable without it.

Accessibility

Always refer to theAccessibility Forms Guide for overall guidance.

If you customize the text inputs, ensure they continue to meet the the accessibility requirements that apply to all form controls.

  • Do not use theplaceholder attribute as the sole label for accessibility reasons. Form components must have an associated<label> with matchingfor attribute. Additionally, most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio to sufficiently serve as the sole label.
  • Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.
  • Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
Return to top
[8]ページ先頭
©2009-2025 Movatter.jp