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

<fieldset>
    <legend>Fieldset</legend>
</fieldset>

Fieldset with instructions

Example & Code

Fieldset with Instructions

Instructions

<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

When we have many screener statements, stack them as filter questions.

yes no

When we have many screener statements, stack them as filter questions.

<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

yes no

<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.

First Option Second Option Third Option

<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

Option A Option B

<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>