Form elements
We use several forms throughout HealthCare.gov. Generally forms are presented against a white or dark blue background. Below are the main elements that make up the forms.
Table forms
Example & Code
<div id="table-form-container"></div>
var View = CardView.extend({
...
initialize: function(){
_.bindAll(this,
'renderTableFormHeaders',
'renderTableFormItem',
'renderTableFormItemFields');
this.tableFormView = new TableFormView({
id: 'table-form',
model: this.model,
collection: new Backbone.Collection();
addItemText: 'Add item',
renderHeaders: this.renderTableHeaders,
renderItem: this.renderTableFormItem,
renderItemFields: this.renderTableFormsItemFeilds
});
};
}),
Fieldset
Example & Code
<fieldset>
<legend>Fieldset</legend>
</fieldset>
Fieldset with instructions
Example & Code
<fieldset>
<legend aria-describedby="fieldset01">Fieldset with Instructions</legend>
<p id="fieldset01" class="instructions">Instructions</p>
</fieldset>
Blue background with subtitle
Example & Code
Blue Background
Blue background subtitle.
<div class="blue-bg">
<div class="lite-card-inner">
<h2 id="blue-bg">Blue Background</h2>
<div class="subtitle">Blue background subtitle.</div>
</div>
</div>
Screener statements blue background
Example & Code
<div class="question-section blue-bg clearfix">
<div class="filter-question form-group">
<div class="visible-radio-label sm hidden-md hidden-lg">When we have many screener statements, stack them as filter questions.</div>
<div class="toggle-buttons">
<label class="btn radio-label">
<input type="radio" name="filter-question-name" value="true"/>
yes
</label>
<label class="btn radio-label">
<input type="radio" name="filter-question-name" value="false"/>
no
</label>
</div>
<span class="visible-radio-label col-md-10 hidden-sm hidden-xs">When we have many screener statements, stack them as filter questions.</span>
<div class="spacer spacer-bottom25 hidden-md hidden-lg"></div>
</div>
</div>
Screener statements white background
These buttons are used throughout the site for yes/no and true/false type questions.
Example & Code
<div class="toggle-buttons">
<label class="btn radio-label">
<input type="radio" name="filter-question-name-white-example" value="true"/>
yes
</label>
<label class="btn radio-label">
<input type="radio" name="filter-question-name-white-example" value="false"/>
no
</label>
</div>
Multiple choice questions blue background
Example & Code
When we have a multiple choice question here, display the choices vertically.
<div class="question blue-bg">
<div class="question-label">When we have a multiple choice question here, display the choices vertically.</div>
<div class="btn-group btn-group-vertical">
<label tabindex="0" class="btn radio-label">
<input type="radio" name="multipleChoice" values="one"/>
First Option
</label>
<label tabindex="0" class="btn radio-label">
<input type="radio" name="multipleChoice" values="two"/>
Second Option
</label>
<label tabindex="0" class="btn radio-label">
<input type="radio" name="multipleChoice" values="three"/>
Third Option
</label>
</div>
</div>
Dropdown questions blue background
Example & Code
<div class="question blue-bg">
<form class="form-inline">
<div class="question-label">A blue background screener select question.</div>
<div class="row">
<div class="col-sm-4">
<div class="form-select ">
<select class="form-control" name="dropdown-name" aria-label="Dropdown Label" data-type="">
<option value="option-value-1">Option 1</option>
<option value="option-value-2">Option 2</option>
<option value="option-value-3">Option 3</option>
</select>
<span class="caret"></span>
</div>
</div>
</div>
</form>
</div>
Dropdowns
Example & Code
Dropdown
<div class="header-label">Dropdown</div>
<div class="form-select">
<select class="form-control" name="dropdown-name" aria-label="Dropdown Label" data-type="">
<option value="option-value-1">Option 1</option>
<option value="option-value-2">Option 2</option>
<option value="option-value-3">Option 3</option>
</select>
<span class="caret"></span>
</div>
Dropdown with default text
<div class="header-label">Dropdown with default text</div>
<div class="form-select">
<select class="form-control" name="dropdown-name" aria-label="Dropdown Label" data-type="">
<option value="" selected="selected">Select Option</option>
<option value="option-value-1">Option 1</option>
<option value="option-value-2">Option 2</option>
<option value="option-value-3">Option 3</option>
</select>
<span class="caret"></span>
</div>
Questions
Example & Code
Is this a question?
<div class="question">
<div class="question-label">Is this a question?</div>
<input class="form-control" type="text" value="Yes!">
</div>
Radio selects
Example & Code
<div class="btn-group-vertical filter-question">
<label tabindex="0" class="btn radio-label">
<input type="radio" name="radio-selects-example" values="option-a"/>
Option A
</label>
<label tabindex="0" class="btn radio-label">
<input type="radio" name="radio-selects-example" values="option-b"/>
Option B
</label>
</div>