Project ValoraLife Pattern Library

Basics

Colors

Show Code
  • blue 01
  • blue 01 dark
  • brown 01
  • brown 02
  • brown 03
  • brown 04
  • beige 01
  • beige 02
  • beige 03
  • beige 04
  • orange
  • red
  • red dark
  • turq 01
  • turq 01 med
  • turq 01 dark
  • turq 01 light
  • turq 02

Code Snip Copy to clipboard

<ul class="color-swatches">
    <li class="color-swatches__item color-swatches__item--blue-01">blue 01</li>
    <li class="color-swatches__item color-swatches__item--blue-01-dark">blue 01 dark</li>
    <li class="color-swatches__item color-swatches__item--brown-01">brown 01</li>
    <li class="color-swatches__item color-swatches__item--brown-02">brown 02</li>
    <li class="color-swatches__item color-swatches__item--brown-03">brown 03</li>
    <li class="color-swatches__item color-swatches__item--brown-04">brown 04</li>
    <li class="color-swatches__item color-swatches__item--beige-01">beige 01</li>
    <li class="color-swatches__item color-swatches__item--beige-02">beige 02</li>
    <li class="color-swatches__item color-swatches__item--beige-03">beige 03</li>
    <li class="color-swatches__item color-swatches__item--beige-04">beige 04</li>
    <li class="color-swatches__item color-swatches__item--orange">orange</li>
    <li class="color-swatches__item color-swatches__item--red">red</li>
    <li class="color-swatches__item color-swatches__item--red-dark">red dark</li>
    <li class="color-swatches__item color-swatches__item--turq-01">turq 01</li>
    <li class="color-swatches__item color-swatches__item--turq-01-med">turq 01 med</li>
    <li class="color-swatches__item color-swatches__item--turq-01-dark">turq 01 dark</li>
    <li class="color-swatches__item color-swatches__item--turq-01-light">turq 01 light</li>
    <li class="color-swatches__item color-swatches__item--turq-02">turq 02</li>
</ul>

Type

Show Code

FF Mark

FF Mark Light

FF Mark Light Italic

FF Mark (Regular)

FF Mark (Regular) Italic

FF Mark Medium

FF Mark Medium Italic

FF Mark Bold

FF Mark Bold Italic

Archer

Archer Medium

Archer Medium Italic

Archer Semibold

Archer Semibold Italic

Archer Bold

Archer Bold Italic

Code Snip Copy to clipboard

<div class="sg-type-samples">
  <div class="sg-col-split">
    <h2 class="sg-h3">FF Mark</h2>
    <p class="sg-type-sample sg-type-sample--mark-100">FF Mark Light</p>
    <p class="sg-type-sample sg-type-sample--mark-100 sg-type-sample--italic">FF Mark Light Italic</p>

    <p class="sg-type-sample sg-type-sample--mark">FF Mark (Regular)</p>
    <p class="sg-type-sample sg-type-sample--mark sg-type-sample--italic">FF Mark (Regular) Italic</p>

    <p class="sg-type-sample sg-type-sample--mark-500">FF Mark Medium</p>
    <p class="sg-type-sample sg-type-sample--mark-500 sg-type-sample--italic">FF Mark Medium Italic</p>

    <p class="sg-type-sample sg-type-sample--mark-600">FF Mark Bold</p>
    <p class="sg-type-sample sg-type-sample--mark-600 sg-type-sample--italic">FF Mark Bold Italic</p>
  </div>	<!-- sg-col-split -->

  <div class="sg-col-split">
    <h2 class="sg-h3">Archer</h2>
    <p class="sg-type-sample sg-type-sample--archer-600">Archer Medium</p>
    <p class="sg-type-sample sg-type-sample--archer-600 sg-type-sample--italic">Archer Medium Italic</p>

    <p class="sg-type-sample sg-type-sample--archer-700">Archer Semibold</p>
    <p class="sg-type-sample sg-type-sample--archer-700 sg-type-sample--italic">Archer Semibold Italic</p>

    <p class="sg-type-sample sg-type-sample--archer-800">Archer Bold</p>
    <p class="sg-type-sample sg-type-sample--archer-800 sg-type-sample--italic">Archer Bold Italic</p>

  </div>	<!-- sg-col-split -->
</div> <!-- type-samples -->

Buttons

Show Code

Colors

Sizing

Code Snip Copy to clipboard

<h3 class="sg-h3">Colors</h3>

<p>
  <button class="btn btn--turq">Turquoise Button</button>
  <button class="btn btn--turq" disabled="">Disabled Turquoise Button</button>
  <button class="btn btn--red">Red Button</button>
  <button class="btn btn--red" disabled="">Disabled Red Button</button>
</p>

<h3 class="sg-h3">Sizing</h3>

<p>
  <button class="btn btn--red">Default Button</button>
</p>

<p>
  <button class="btn btn--red btn--large">Large Button</button>
  <button class="btn btn--red btn--small">Small Button</button>
  <button class="btn btn--red btn--mini">Mini Button</button>
</p>

Form Question Styles

Show Code

Form Item Question

Who will be the primary beneficiary?

Small Form Item Question

In the past 3 years or within the next 2 years, have you taken or do you intend to take part in underwater diving, hanggliding, parasailing, parakiting, parachuting, skydiving, ultralight, soaring, ballooning, bungee jumping, rock or mountain climbing, helicopter skiing, or organized racing by automobile, motorcycle, motorboat or snowmobile?

Form Item Indentation

Who will be the primary beneficiary?

Reflexive Question Level 1

Reflexive Question Level 2

Code Snip Copy to clipboard

<div class="form-item">
	<h3 class="label">Form Item Question</h3>
	<h2 class="form-item__question">Who will be the primary beneficiary?</h2>
</div> <!-- form-item -->

<div class="form-item">
	<h3 class="label">Small Form Item Question</h3>
	<h2 class="form-item__question form-item__question--small">In the past 3 years or within the next 2 years, have you taken or do you intend to take part in underwater diving, hanggliding, parasailing, parakiting, parachuting, skydiving, ultralight, soaring, ballooning, bungee jumping, rock or mountain climbing, helicopter skiing, or organized racing by automobile, motorcycle, motorboat or snowmobile?</h2>
</div> <!-- form-item -->

<div class="form-item">
	<h3 class="label">Form Item Indentation</h3>
	<h2 class="form-item__question">Who will be the primary beneficiary?</h2>

	<div class="field-group__item">
		<label class="visually-hidden" for="demo-text-basic">Your First Name</label>
		<input id="demo-text-basic" name="demo-text-basic" type="text" placeholder="Jane" class="js-validate-input" required="">
	</div>


	<div class="reflexive-item reflexive-item--indent-1">
		<h2 class="form-item__question form-item__question--small">Reflexive Question Level 1</h2>

		<div class="field-group__item">
			<label class="visually-hidden" for="demo-text-basic">Your First Name</label>
			<input id="demo-text-basic" name="demo-text-basic" type="text" placeholder="Jane" class="js-validate-input" required="">
		</div>
	</div> <!--reflexive-item -->


	<div class="reflexive-item reflexive-item--indent-2">
		<h2 class="form-item__question form-item__question--small">Reflexive Question Level 2</h2>

		<div class="field-group__item">
			<label class="visually-hidden" for="demo-text-basic">Your First Name</label>
			<input id="demo-text-basic" name="demo-text-basic" type="text" placeholder="Jane" class="js-validate-input" required="">
		</div>
	</div> <!--reflexive-item -->

</div> <!-- form-item -->

Basic Text (for FAQs, Blog)

Show Code

This block demonstrates styles to blocks classed with basic-text (e.g FAQs, blog content).

Paragraphs, Links, Bold, Italics

This is what bold text and italic text, strong text and emphasized text. Both bold and italics.

This is a few hyperlinks would look like.

Headings

An h1 header

An h2 header

An h3 header

An h4 header

An h5 header
An h6 header

Blockquote

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

Bulleted List

  • This is a regular list item
    • This is a regular list item
    • This is a regular list item
    • This is a regular list item
  • This is a regular list item
  • This is a regular list item

Numbered List

  1. This is a number list item
  2. This is another number list item
  3. This is the last number list item

Table

Column A Column B Column C Column D
Lorem ipsum dolor sit amet Consectetur lorem ipsum dolor sit amet Occaecat cupidatat non proident nostru Sunt in culpa qui
Lorem ipsum dolor sit amet dolore eu fugiat nulla pariatur Sunt in culpa Nulla pariatur
sed do eiusmod tempor Consectetur adipisicin Et dolore magna quis nostru Lorem id est
Lorem ipsum dolor sit amet dolore eu fugiat nulla pariatur Sunt in culpa Nulla pariatur
Lorem ipsum dolor sit amet Consectetur lorem ipsum dolor sit amet Occaecat cupidatat non proident nostru Sunt in culpa qui

Code / Preformatted

Code: lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Pre: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Image

Code Snip Copy to clipboard

<div class="basic-text">

                  <p>This block demonstrates styles to blocks classed with <code>basic-text</code> (e.g FAQs, blog content).</p>

<h2>Paragraphs, Links, Bold, Italics</h2>
<p>This is what <b>bold text</b> and <i>italic text</i>, <strong>strong text</strong> and <em>emphasized text</em>. <strong><em>Both bold and italics</em></strong>.</p>

<p>This is a <a href="#">few</a> hyperlinks <a href="#">would</a> look <a href="#">like</a>.</p>

<h2>Headings</h2>

<h1>An h1 header</h1>
<h2>An h2 header</h2>
<h3>An h3 header</h3>
<h4>An h4 header</h4>
<h5>An h5 header</h5>
<h6>An h6 header</h6>


<h2>Blockquote</h2>
<blockquote>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</blockquote>

<h2>Bulleted List</h2>
<ul>
  <li>This is a regular list item</li>
  <ul>
    <li>This is a regular list item</li>
    <li>This is a regular list item </li>
    <li>This is a regular list item</li>
  </ul>
  <li>This is a regular list item</li>
  <li>This is a regular list item </li>
</ul>

<h2>Numbered List</h2>
<ol>
  <li>This is a number list item</li>
  <li>This is another number list item </li>
  <li>This is the last number list item</li>
</ol>


<h2>Table</h2>
<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th>Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Consectetur lorem ipsum dolor sit amet</td>
      <td>Occaecat cupidatat non proident nostru</td>
      <td>Sunt in culpa qui</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>dolore eu fugiat nulla pariatur</td>
      <td>Sunt in culpa</td>
      <td>Nulla pariatur</td>
    </tr>
    <tr>
      <td>sed do eiusmod tempor</td>
      <td>Consectetur adipisicin</td>
      <td>Et dolore magna quis nostru</td>
      <td>Lorem id est</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>dolore eu fugiat nulla pariatur</td>
      <td>Sunt in culpa</td>
      <td>Nulla pariatur</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Consectetur lorem ipsum dolor sit amet</td>
      <td>Occaecat cupidatat non proident nostru</td>
      <td>Sunt in culpa qui</td>
    </tr>
  </tbody>
</table>

<h2>Code / Preformatted</h2>

<p><code>Code: lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</code></p>

<p>
  </p><pre>Pre: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</pre>
<p></p>


<h2>Image</h2>
<img src="https://unsplash.it/500/300" alt="">

                </div> <!-- basic-text-->

Tables

Product Table

Show Code

This table collapses to two-columns (with a button switcher) on mobile.

Product Term Life Return of Premium
Example beneficiary payout $300,000 $300,000
Example monthly cost $30/month $94/month
Example cost after 1 year $357 $1,125
Example cost after 5 years $1,785 $5,625
Example cost after 15 years $5,355 $16,875
Total cost at end of 30-year term $10,710 $33,750

Code Snip Copy to clipboard

<p class="demo-note">This table collapses to two-columns (with a button switcher) on mobile.</p>

<ul class="table-toggles table-toggles--3col" data-table="demo-responsive-table">
  <li><a class="btn btn--table-toggle btn--squared btn--red" href="#" data-col-pos="2">Term Life</a></li>
  <li><a class="btn btn--table-toggle btn--squared btn--blue" href="#" data-col-pos="3">ROP</a></li>
</ul>


<table class="product-table demo-table table table--3col table--responsive demo-responsive-table" id="demo-responsive-table">
  <thead>
    <tr>
      <th class="th th--tr-title">Product</th>
      <th class="th th--term">Term Life</th>
      <th class="th th--rop">Return of Premium
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="td td--tr-title">Example beneficiary payout</td>
      <td class="td td--callout">$300,000</td>
      <td class="td td--callout">$300,000</td>
    </tr>
    <tr>
      <td class="td td--tr-title">Example monthly cost</td>
      <td class="td td--callout">$30/month</td>
      <td class="td td--callout">$94/month</td>
    </tr>
    <tr>
      <td class="td td--tr-title">Example cost after 1 year</td>
      <td>$357</td>
      <td>$1,125</td>
    </tr>
    <tr>
      <td class="td td--tr-title">Example cost after 5 years</td>
      <td>$1,785</td>
      <td>$5,625</td>
    </tr>
    <tr>
      <td class="td td--tr-title">Example cost after 15 years</td>
      <td>$5,355</td>
      <td>$16,875</td>
    </tr>
    <tr>
      <td class="td td--tr-title">Total cost at end of 30-year term</td>
      <td>$10,710</td>
      <td>$33,750</td>
    </tr>
  </tbody>
</table>

Feature Table

Show Code
Term Life: Things You Should Know
Price Most affordable
Monthly Payment Fixed
Maximum Coverage $1,000,000
Term 20 or 30 year
Premium Return 0% returned
Conditions Medical exam required
Return of Premium: Things You Should Know
Price More expensive
Monthly Payment Fixed
Maximum Coverage $1,000,000
Term 20 or 30 year
Premium Return 100% if you outlive the term
Conditions Medical exam required

Code Snip Copy to clipboard

<div class="sg-feature-tables">

  <div class="container">

    <div class="product-features product-features--term">
      <h5 class="product-features-table__head product-features-table__head--term">Term Life: Things You Should Know</h5>
      <table class="table feature-table feature-table--term product-features-table product-features-table--term">
        <tbody><tr>
          <td class="td td--key">Price</td>
          <td class="td td--val">Most affordable</td>
        </tr>
        <tr>
          <td class="td td--key">Monthly Payment</td>
          <td class="td td--val">Fixed</td>
        </tr>
        <tr>
          <td class="td td--key">Maximum Coverage</td>
          <td class="td td--val">$1,000,000</td>
        </tr>
        <tr>
          <td class="td td--key">Term</td>
          <td class="td td--val">20 or 30 year</td>
        </tr>
        <tr>
          <td class="td td--key">Premium Return</td>
          <td class="td td--val">0% returned</td>
        </tr>
        <tr>
          <td class="td td--key">Conditions</td>
          <td class="td td--val">Medical exam required</td>
        </tr>
      </tbody></table>
    </div> <!-- proudct-feautres-table -->
  </div> <!-- container -->

  <div class="container">

    <div class="product-features product-features--rop">
      <h5 class="product-features-table__head product-features-table__head--rop">Return of Premium: Things You Should Know</h5>
      <table class="table feature-table feature-table--rop product-features-table product-features-table--rop">
        <tbody><tr>
          <td class="td td--key">Price</td>
          <td class="td td--val">More expensive</td>
        </tr>
        <tr>
          <td class="td td--key">Monthly Payment</td>
          <td class="td td--val">Fixed</td>
        </tr>
        <tr>
          <td class="td td--key">Maximum Coverage</td>
          <td class="td td--val">$1,000,000</td>
        </tr>
        <tr>
          <td class="td td--key">Term</td>
          <td class="td td--val">20 or 30 year</td>
        </tr>
        <tr>
          <td class="td td--key">Premium Return</td>
          <td class="td td--val">100% if you outlive the term</td>
        </tr>
        <tr>
          <td class="td td--key">Conditions</td>
          <td class="td td--val">Medical exam required</td>
        </tr>
      </tbody></table>
    </div> <!-- product-features -->

  </div> <!-- container -->

</div> <!-- sg-feature-tables -->

Forms - Subcomponents

Label - Basic

Show Code

Code Snip Copy to clipboard

<div class="field-group__item">
	<label for="demo-text-a">Your First Name</label>
	<input id="demo-text-a" type="text" placeholder="Jane" value="">
</div> <!-- field-group__item -->

Text Input - Basic

Show Code

Code Snip Copy to clipboard

<div class="field-group__item">
    <label class="visually-hidden" for="demo-text-basic">Your First Name</label>
    <input id="demo-text-basic" name="demo-text-basic" type="text" placeholder="Jane" class="js-validate-input" required="">
</div>
<div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter text"></span>
</div>

Text Input - Disabled - No Label

Show Code

Code Snip Copy to clipboard

<div class="field-group__item">
    <label class="visually-hidden" for="demo-disabled">Name</label>
    <input id="demo-disabled" class="js-validate-input" type="text" placeholder="Jane" disabled="" required="">
</div>

Text Input - SSN

Show Code

Code Snip Copy to clipboard

<div class="field-group">
    <div class="field-group__item">
        <label class="visually-hidden" for="demo-ssn">Spouse's Social Security Number</label>
        <input class="js-validate-input js-mask js-mask--ssn" id="demo-ssn" type="text" placeholder="000-00-0000" required="">
    </div>
    <div class="input-error-msg-container">
        <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter your ssn"></span>
    </div>
</div>
<!-- field-group -->

Text Input - Percentage - Inline

Show Code

This person should receive the following percentage:

Code Snip Copy to clipboard

<div class="field-group">
    <div class="field-group__item field-group__item--text-percent">
        <label for="demo-percent-a">Percentage</label>
        <input class="input input--percent js-validate-input js-mask js-mask--text-percent" id="demo-percent-a" type="text" placeholder="100%" maxlength="5" size="5" required="">
    </div>
    <div class="input-error-msg-container">
        <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter a valid percentage"></span>
    </div>
</div>
<!-- field-group -->
<div class="app-component--percentage">
    <div class="field-group field-group--inline field-group--block-to-inline">
        <h2 class="field-group__item field-group__item--question form-item__question form-item__question--small">This person should receive the following percentage:</h2>
        <div class="field-group__item field-group__item--text-percent">
            <label class="visually-hidden" for="demo-percent-b">Percentage</label>
            <input class="input input--percent js-validate-input js-mask js-mask--text-percent" id="demo-percent-b" type="text" placeholder="100%" maxlength="5" size="5" required="">
        </div>
    </div>
    <!-- field-group -->
    <div class="input-error-msg-container">
        <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter a valid percentage"></span>
    </div>
</div>

Text Input - Date - Short

Show Code

Code Snip Copy to clipboard

<div class="field-group">
  <div class="field-group__item">
    <label class="visually-hidden" for="demo-date--short">Date of Diagnosis</label>
    <input class="js-validate-input js-mask js-mask--date-short" id="demo-date--short" type="text" placeholder="MM/YYYY" required="">
  </div>
  <div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter a valid date."></span>
  </div>
</div> <!-- field-group -->

Text Input - Date - Long

Show Code

Code Snip Copy to clipboard

<div class="field-group__item">
    <label class="visually-hidden" for="demo-date--long">Spouse’s Date of Birth</label>
    <input class="js-validate-input js-mask js-mask--date-long" id="demo-date--long" type="text" placeholder="MM/DD/YYYY" required="">
</div>
<div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter a valid date."></span>
</div>

Text Input - Autocomplete

Show Code

Code Snip Copy to clipboard

<div class="field-group__item">
    <label class="visually-hidden" for="demo-autocomplete-1">Your Address</label>
    <input class="js-validate-input" id="demo-autocomplete-1" type="text" placeholder="123 Main Street" autocomplete="on" required="">
</div>
<div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter an address."></span>
</div>

Select - Basic

Show Code

Code Snip Copy to clipboard

<div class="field-group__item">
    <label for="demo-select">Are all of your spouse’s biological brothers living?</label>
    <select id="demo-select" class="js-validate-input" required="">
        <option value="" disabled="" selected="">Select an answer...</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
        <option value="no-biological-brothers">No biological brothers</option>
    </select>
</div>
<div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter a value."></span>
</div>

Range Sliders

Show Code

Init: 75 Min: 15 Max: 165 Step: 15

Init: 200 Min: 0 Max: 1500 Step: 25

Code Snip Copy to clipboard

<div class="field-group">
    <div class="field-group__item">
        <label for="demo-range-input-simple">Label for Range Slider</label>
        <span class="range-indicator" id="demo-range-simple-indicator"></span>
        <div class="range-wrap">
            <div id="demo-range-simple" class="js-range" data-indicator="demo-range-simple-indicator" data-value="75" data-min="15" data-max="165" data-step="15">
                <input id="demo-range-input-simple" class="js-validate-input range-wrap-input" type="number" min="10" aria-hidden="true" tabindex="-1" required="">
            </div>
        </div>
    </div>
    <!-- field-group__item -->
    <p>
        <code class="sg-code">Init: 75</code>
        <code class="sg-code">Min: 15</code>
        <code class="sg-code">Max: 165</code>
        <code class="sg-code">Step: 15</code>
    </p>
</div>
<!-- field-group -->
<div class="field-group">
    <div class="field-group__item">
        <label for="demo-range-input-dollars">Range Slider with dollar formatting</label>
        <span class="range-indicator" id="demo-range-dollars-indicator"></span>
        <div class="range-wrap">
            <div id="demo-range-dollars" class="js-range js-range--dollars-no-decimals" data-indicator="demo-range-dollars-indicator" data-value="200" data-min="0" data-max="1500" data-step="25">
                <input id="demo-range-input-dollars" class="js-validate-input range-wrap-input" type="number" min="10" aria-hidden="true" tabindex="-1" required="">
            </div>
        </div>
    </div>
    <!-- field-group__item -->
    <p>
        <code class="sg-code">Init: 200</code>
        <code class="sg-code">Min: 0</code>
        <code class="sg-code">Max: 1500</code>
        <code class="sg-code">Step: 25</code>
    </p>
</div>
<!-- field-group -->
<div class="field-group">
    <div class="field-group__item">
        <label for="demo-range-input-disabled">Disabled Range Slider</label>
        <span class="range-indicator range-indicator--dollars" id="demo-range-disabled-indicator"></span>
        <div class="range-wrap">
            <div disabled="" id="demo-range-disabled" class="js-range" data-indicator="demo-range-disabled-indicator" data-value="200" data-min="100" data-max="900" data-step="25">
                <input id="demo-range-input-disabled" class="js-validate-input range-wrap-input" type="number" min="10" aria-hidden="true" tabindex="-1" disabled="">
            </div>
        </div>
    </div>
    <!-- field-group__item -->
</div>
<!-- field-group -->

Checkboxes - Basic

Show Code

Code Snip Copy to clipboard

<div class="field-group field-group--inline">
    <div class="field-group__item field-group__item--hang-label">
        <input type="checkbox" name="demo-checkbox-group-1" value="demo-checkbox-0" id="demo-checkbox-0">
        <label for="demo-checkbox-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</label>
    </div>
</div>
<!-- field-group -->
<div class="field-group field-group--inline">
    <div class="field-group__item field-group__item--hang-label">
        <input type="checkbox" name="demo-checkbox-group-2" value="demo-checkbox-a" id="demo-checkbox-a">
        <label for="demo-checkbox-a">Checkbox A</label>
    </div>
    <div class="field-group__item field-group__item--hang-label">
        <input type="checkbox" name="demo-checkbox-group-2" value="demo-checkbox-b" id="demo-checkbox-b" checked="">
        <label for="demo-checkbox-b">Checkbox B</label>
    </div>
    <div class="field-group__item field-group__item--hang-label">
        <input type="checkbox" name="demo-checkbox-group-2" value="demo-checkbox-c" id="demo-checkbox-c" disabled="">
        <label for="demo-checkbox-c">Choice E is disabled</label>
    </div>
    <div class="field-group__item field-group__item--hang-label">
        <input type="checkbox" name="demo-checkbox-group-2" value="demo-checkbox-d" id="demo-checkbox-d" disabled="" checked="">
        <label for="demo-checkbox-d">Choice F is disabled and checked.</label>
    </div>
</div>
<!-- field-group -->

Radio Group - Text

Show Code

Code Snip Copy to clipboard

<div class="field-group field-group--inline">
    <div class="field-group__item field-group__item--hang-label">
        <input type="radio" name="demo-radio-text" id="demo-radio-text--years" class="js-radio-with-text-input js-validate-input" value="years-old">
        <label for="demo-radio-text--years-text">
            <input type="text" size="4" class="js-validate-input" maxlength="4" id="demo-radio-text--years-text" name="demo-radio-text--years-text" disabled="" required=""> years old
        </label>
    </div>
    <div class="field-group__item field-group__item--hang-label">
        <input type="radio" name="demo-radio-text" id="demo-radio-text--deceased" class="js-validate-input" value="deceased" required="">
        <label for="demo-radio-text--deceased">Deceased</label>
    </div>
    <div class="field-group__item field-group__item--hang-label">
        <input type="radio" name="demo-radio-text" id="demo-radio-text--unknown" class="js-validate-input" value="unknown" required="">
        <label for="demo-radio-text--unknown">Unknown</label>
    </div>
</div>
<div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please select an option."></span>
</div>

Radio Group - Text - Date

Show Code

Code Snip Copy to clipboard

<div class="field-group field-group--inline">
    <div class="field-group__item field-group__item--hang-label">
        <input type="radio" name="demo-radio-date" id="demo-radio-date--date" class="js-radio-with-text-input js-validate-input" value="date" required="">
        <label for="demo-radio-date--date-text">
            <input type="text" class="js-mask js-mask--date-short js-validate-input" placeholder="MM/YYYY" id="demo-radio-date--date-text" name="demo-radio-date--date-text" disabled="" required="">
        </label>
    </div>
    <div class="field-group__item field-group__item--hang-label">
        <input type="radio" name="demo-radio-date" id="demo-radio-date--unknown" class="js-validate-input" value="unknown" required="">
        <label for="demo-radio-date--unknown">Unknown</label>
    </div>
</div>
<div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please select an option."></span>
</div>

Helper

Show Code
? Help

This is a text-only helper. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

? Help
Example banking check with routing number at bottom left and account number at bottom center
? Help
MassMutual

This is a helper with an image and text. Lorem ipsum.

Code Snip Copy to clipboard

<div class="helper">

                  <span class="helper__icon">?</span>
<span class="helper__word">Help</span>
<div class="helper__content">
    <p>This is a text-only helper. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="helper">
    <span class="helper__icon">?</span>
    <span class="helper__word">Help</span>
    <div class="helper__content">
        <img src="/img/bank-numbers-explainer.svg" alt="Example banking check with routing number at bottom left and account number at bottom center">
    </div>
</div>
<div class="helper">
    <span class="helper__icon">?</span>
    <span class="helper__word">Help</span>
    <div class="helper__content">
        <img src="/img/logo-mm.svg" alt="MassMutual">
        <p>This is a helper with an image and text. Lorem ipsum.</p>
    </div>
</div>

Error Message

Show Code
Please enter a value.

Code Snip Copy to clipboard

<div class="input-error-msg-container">
    <!-- In use, the span text will not be entered in the html. It will be provided by the data-error attribute and added by Javascript -->
    <span class="js-input-error-msg-span js-input-error-msg-active" aria-live="polite" data-error="Please enter a value.">Please enter a value.</span>
</div>

Button Iterate - Add + Remove

Show Code

Code Snip Copy to clipboard

<div class="form-item">
    <div class="js-iterable" id="demo-iterable-a">
        <div class="field-group__item">
            <label class="visually-hidden" for="demo-text-basic">Your First Name</label>
            <input id="demo-text-basic" name="demo-text-basic" type="text" placeholder="Jane" class="js-validate-input" required="">
        </div>
        <div class="input-error-msg-container">
            <span class="js-input-error-msg-span" aria-live="polite" data-error="Please enter text"></span>
        </div>
    </div>
    <!-- js- iterable -->
    <p class="iterate-add">
        <button data-iterate-parent="demo-iterable-a" class="btn btn-iterate--add js-iterate--add field-group__item">Add Another</button>
    </p>
</div>
<!-- form-item -->
<div class="form-item">
    <div class="js-iterable" id="demo-iterable-b">
        <div class="app-component--custom-diagnosis--long">
            <div class="field-group field-group--block-to-inline">
                <div class="field-group__item field-group__item--custom-diagnosis-long-diagnosis">
                    <label for="demo-custom-diagnosis-long--diagnosis">Diagnosis</label>
                    <input id="demo-custom-diagnosis-long--diagnosis" class="js-validate-input" type="text" required="">
                </div>
                <div class="field-group__item field-group__item--custom-diagnosis-long-physician">
                    <label for="demo-custom-diagnosis-long--physician">Physician</label>
                    <input id="demo-custom-diagnosis-long--physician" class="js-validate-input" type="text" required="">
                </div>
            </div>
            <div class="field-group field-group--block-to-inline">
                <div class="field-group__item field-group__item--custom-diagnosis-long-date">
                    <label for="demo-custom-diagnosis-long--date">Date of Diagnosis</label>
                    <input id="demo-custom-diagnosis-long--date" class="js-mask js-mask--date-short js-validate-input" type="text" placeholder="MM/YYYY" required="">
                </div>
                <div class="field-group__item field-group__item--custom-diagnosis-long-city">
                    <label for="demo-custom-diagnosis-long--city">City</label>
                    <input id="demo-custom-diagnosis-long--city" class="js-validate-input" type="text" required="">
                </div>
                <div class="field-group__item field-group__item--custom-diagnosis-long-state">
                    <label for="demo-custom-diagnosis-long--state">State</label>
                    <select id="demo-custom-diagnosis-long--state" class="js-validate-input" required="">
                        <option value="" disabled="" selected="">Select a state…</option>
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AS">American Samoa</option>
                        <option value="AZ">Arizona</option>
                        <option value="AR">Arkansas</option>
                        <option value="CA">California</option>
                        <option value="CO">Colorado</option>
                        <option value="CT">Connecticut</option>
                        <option value="DE">Delaware</option>
                        <option value="DC">District Of Columbia</option>
                        <option value="FM">Federated States Of Micronesia</option>
                        <option value="FL">Florida</option>
                        <option value="GA">Georgia</option>
                        <option value="GU">Guam</option>
                        <option value="HI">Hawaii</option>
                        <option value="ID">Idaho</option>
                        <option value="IL">Illinois</option>
                        <option value="IN">Indiana</option>
                        <option value="IA">Iowa</option>
                        <option value="KS">Kansas</option>
                        <option value="KY">Kentucky</option>
                        <option value="LA">Louisiana</option>
                        <option value="ME">Maine</option>
                        <option value="MH">Marshall Islands</option>
                        <option value="MD">Maryland</option>
                        <option value="MA">Massachusetts</option>
                        <option value="MI">Michigan</option>
                        <option value="MN">Minnesota</option>
                        <option value="MS">Mississippi</option>
                        <option value="MO">Missouri</option>
                        <option value="MT">Montana</option>
                        <option value="NE">Nebraska</option>
                        <option value="NV">Nevada</option>
                        <option value="NH">New Hampshire</option>
                        <option value="NJ">New Jersey</option>
                        <option value="NM">New Mexico</option>
                        <option value="NY">New York</option>
                        <option value="NC">North Carolina</option>
                        <option value="ND">North Dakota</option>
                        <option value="MP">Northern Mariana Islands</option>
                        <option value="OH">Ohio</option>
                        <option value="OK">Oklahoma</option>
                        <option value="OR">Oregon</option>
                        <option value="PW">Palau</option>
                        <option value="PA">Pennsylvania</option>
                        <option value="PR">Puerto Rico</option>
                        <option value="RI">Rhode Island</option>
                        <option value="SC">South Carolina</option>
                        <option value="SD">South Dakota</option>
                        <option value="TN">Tennessee</option>
                        <option value="TX">Texas</option>
                        <option value="UT">Utah</option>
                        <option value="VT">Vermont</option>
                        <option value="VI">Virgin Islands</option>
                        <option value="VA">Virginia</option>
                        <option value="WA">Washington</option>
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="input-error-msg-container">
            <span id="custom-diagnosis-long-error-msg" class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for diagnosis, physician, date of diagnosis, city, and state are required."></span>
        </div>
    </div>
    <!-- js-iterable -->
    <p class="iterate-add">
        <button data-iterate-parent="demo-iterable-b" class="btn btn-iterate--add js-iterate--add field-group__item">Add Another</button>
    </p>
</div>
<!-- form-item -->
<div class="form-item">
    <div class="js-iterable" id="demo-iterable-c">
        <div class="app-component--custom-beneficiary">
            <div class="field-group-wrap">
                <label>Full Name</label>
                <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item">
                        <label class="visually-hidden" for="demo-custom-beneficiary-name-long--first">First Name</label>
                        <input id="demo-custom-beneficiary-name-long--first" class="js-validate-input" type="text" placeholder="First Name" required="">
                    </div>
                    <div class="field-group__item">
                        <label class="visually-hidden" for="demo-custom-beneficiary-name-long--middle">Middle Name</label>
                        <input id="demo-custom-beneficiary-name-long--middle" class="js-validate-input" type="text" placeholder="Middle Name" data-input-valid="true">
                    </div>
                    <div class="field-group__item">
                        <label class="visually-hidden" for="demo-custom-beneficiary-name-long--last">Last Name</label>
                        <input id="demo-custom-beneficiary-name-long--last" class="js-validate-input" type="text" placeholder="Last Name" required="">
                    </div>
                </div>
                <!-- field-group -->
            </div>
            <!-- field-group-wrap -->
            <div class="field-group-wrap">
                <label>Address</label>
                <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item field-group__item--custom-beneficiary-address-long-line1">
                        <label class="visually-hidden" for="demo-custom-beneficiary-address-long--line1">Address Line 1</label>
                        <input id="demo-custom-beneficiary-address-long--line1" class="text-input-item js-input-item--text-autocomplete js-validate-input" type="text" placeholder="Address Line 1" autocomplete="off" required="">
                    </div>
                </div>
                <!-- field-group -->
                <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item field-group__item--custom-beneficiary-address-long-line2">
                        <label class="visually-hidden" for="demo-custom-beneficiary-address-long--line2">Address Line 2</label>
                        <input id="demo-custom-beneficiary-address-long--line2" class="js-validate-input" type="text" placeholder="Address Line 2" data-input-valid="true">
                    </div>
                </div>
                <!-- field-group -->
                <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item field-group__item--custom-beneficiary-address-long-zip">
                        <input id="demo-custom-beneficiary-address-long--zip" class="js-validate-input js-mask--zip-code" type="text" placeholder="Zip" required="">
                        <label class="visually-hidden" for="demo-custom-beneficiary-address-long--zip">Zip Code</label>
                    </div>
                    <div class="field-group__item field-group__item--custom-beneficiary-address-long-city">
                        <input id="demo-custom-beneficiary-address-long--city" class="js-validate-input" type="text" placeholder="City" required="">
                        <label class="visually-hidden" for="demo-custom-beneficiary-address-long--city">City</label>
                    </div>
                    <div class="field-group__item field-group__item--custom-beneficiary-address-long-state">
                        <label class="visually-hidden" for="demo-custom-beneficiary-address-long--state">State</label>
                        <select id="demo-custom-beneficiary-address-long--state" class="js-validate-input" required="">
                            <option value="" disabled="" selected="">Select a State…</option>
                            <option value="AL">Alabama</option>
                            <option value="AK">Alaska</option>
                            <option value="AS">American Samoa</option>
                            <option value="AZ">Arizona</option>
                            <option value="AR">Arkansas</option>
                            <option value="CA">California</option>
                            <option value="CO">Colorado</option>
                            <option value="CT">Connecticut</option>
                            <option value="DE">Delaware</option>
                            <option value="DC">District Of Columbia</option>
                            <option value="FM">Federated States Of Micronesia</option>
                            <option value="FL">Florida</option>
                            <option value="GA">Georgia</option>
                            <option value="GU">Guam</option>
                            <option value="HI">Hawaii</option>
                            <option value="ID">Idaho</option>
                            <option value="IL">Illinois</option>
                            <option value="IN">Indiana</option>
                            <option value="IA">Iowa</option>
                            <option value="KS">Kansas</option>
                            <option value="KY">Kentucky</option>
                            <option value="LA">Louisiana</option>
                            <option value="ME">Maine</option>
                            <option value="MH">Marshall Islands</option>
                            <option value="MD">Maryland</option>
                            <option value="MA">Massachusetts</option>
                            <option value="MI">Michigan</option>
                            <option value="MN">Minnesota</option>
                            <option value="MS">Mississippi</option>
                            <option value="MO">Missouri</option>
                            <option value="MT">Montana</option>
                            <option value="NE">Nebraska</option>
                            <option value="NV">Nevada</option>
                            <option value="NH">New Hampshire</option>
                            <option value="NJ">New Jersey</option>
                            <option value="NM">New Mexico</option>
                            <option value="NY">New York</option>
                            <option value="NC">North Carolina</option>
                            <option value="ND">North Dakota</option>
                            <option value="MP">Northern Mariana Islands</option>
                            <option value="OH">Ohio</option>
                            <option value="OK">Oklahoma</option>
                            <option value="OR">Oregon</option>
                            <option value="PW">Palau</option>
                            <option value="PA">Pennsylvania</option>
                            <option value="PR">Puerto Rico</option>
                            <option value="RI">Rhode Island</option>
                            <option value="SC">South Carolina</option>
                            <option value="SD">South Dakota</option>
                            <option value="TN">Tennessee</option>
                            <option value="TX">Texas</option>
                            <option value="UT">Utah</option>
                            <option value="VT">Vermont</option>
                            <option value="VI">Virgin Islands</option>
                            <option value="VA">Virginia</option>
                            <option value="WA">Washington</option>
                            <option value="WV">West Virginia</option>
                            <option value="WI">Wisconsin</option>
                            <option value="WY">Wyoming</option>
                        </select>
                    </div>
                </div>
                <!-- field-group -->
            </div>
            <!-- field-group-wrap -->
            <div class="field-group-wrap">
                <label>Phone</label>
                <div class="field-group field-group--inline">
                    <div class="field-group__item field-group__item--hang-label">
                        <input id="demo-custom-beneficiary-phone-number--home" class="js-validate-input" type="radio" name="custom-beneficiary-phone-number--type" value="home" required="">
                        <label for="demo-custom-beneficiary-phone-number--home">Home</label>
                    </div>
                    <div class="field-group__item field-group__item--hang-label">
                        <input id="demo-custom-beneficiary-phone-number--work" class="js-validate-input" type="radio" name="custom-beneficiary-phone-number--type" value="work" required="">
                        <label for="demo-custom-beneficiary-phone-number--work">Work</label>
                    </div>
                    <div class="field-group__item field-group__item--hang-label">
                        <input id="demo-custom-beneficiary-phone-number--mobile" class="js-validate-input" type="radio" name="custom-beneficiary-phone-number--type" value="mobile" required="">
                        <label for="demo-custom-beneficiary-phone-number--mobile">Mobile</label>
                    </div>
                </div>
                <!-- field-group -->
                <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item field-group__item--custom-beneficiary-phone-number-phone-number">
                        <label class="visually-hidden" for="demo-custom-beneficiary-phone-number--phone-number">phone number</label>
                        <input id="demo-custom-beneficiary-phone-number--phone-number" class="js-mask js-mask--phone js-validate-input" type="text" name="custom-beneficiary-phone-number" placeholder="(123) 123-1234" required="">
                    </div>
                </div>
                <!-- field-group -->
            </div>
            <!-- field-group-wrap -->
            <div class="field-group-wrap">
                <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item">
                        <label for="demo-custom-beneficiary-ssn">Social Security Number</label>
                        <input id="demo-custom-beneficiary-ssn" class="js-mask js-mask--ssn js-validate-input" type="text" placeholder="000-00-0000" required="">
                    </div>
                    <div class="field-group__item">
                        <label for="demo-custom-beneficiary-date--long">Date of Birth</label>
                        <input id="demo-custom-beneficiary-date--long" class="js-mask js-mask--date-long js-validate-input" type="text" placeholder="MM/DD/YYYY" required="">
                    </div>
                </div>
                <!-- field-group -->
            </div>
            <!-- field-group-wrap -->
        </div>
        <!-- app component -->
        <div class="input-error-msg-container">
            <span class="js-input-error-msg-span" aria-live="polite" data-error="Please answer required fields outlined in red."></span>
        </div>
    </div>
    <!-- js-iterable -->
    <p class="iterate-add">
        <button data-iterate-parent="demo-iterable-c" class="btn btn-iterate--add js-iterate--add field-group__item">Add Another</button>
    </p>
</div>
<!-- form-item -->

Forms - Components

Radio Group - Horizontal

Show Code

Demo: Radio Group - Horizontal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
  <h2 class="form-item__question">Demo: Radio Group - Horizontal</h2>

  <div class="form-item__prompt">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
  </div>

  <div class="field-group field-group--inline">
    <div class="field-group__item field-group__item--hang-label">
      <input id="demo-radio-horiz-a" class="js-validate-input" type="radio" name="demo-radio-group-horiz" value="demo-radio-horiz-a" required="">
      <label for="demo-radio-horiz-a">Radio Button A</label>
    </div>
    <div class="field-group__item field-group__item--hang-label">
      <input id="demo-radio-horiz-b" class="js-validate-input" type="radio" name="demo-radio-group-horiz" value="demo-radio-horiz-b" required="">
      <label for="demo-radio-horiz-b">Radio Button B</label>
    </div>
    <div class="field-group__item field-group__item--hang-label">
      <input id="demo-radio-horiz-c" class="js-validate-input" type="radio" name="demo-radio-group-horiz" value="demo-radio-horiz-c" required="">
      <label for="demo-radio-horiz-c">Radio Button C</label>
    </div>
  </div> <!-- field-group -->

  <div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please choose an option."></span>
  </div>
</div> <!-- form-item -->

Radios - Vertical

Show Code

Demo: Radios - Vertical

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Radios - Vertical</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>

                <div class="field-group">
                  <div class="field-group__item field-group__item--hang-label">
                    <input type="radio" name="demo-radio-group-vert" value="demo-radio-vert-a" id="demo-radio-vert-a" class="js-validate-input" required="">
                    <label for="demo-radio-vert-a">Radio Button A</label>
                  </div>
                  <div class="field-group__item field-group__item--hang-label">
                    <input type="radio" name="demo-radio-group-vert" value="demo-radio-vert-b" id="demo-radio-vert-b" class="js-validate-input" required="">
                    <label for="demo-radio-vert-b">Radio Button B</label>
                  </div>
                  <div class="field-group__item field-group__item--hang-label">
                    <input type="radio" name="demo-radio-group-vert" value="demo-radio-vert-c" id="demo-radio-vert-c" class="js-validate-input" required="">
                    <label for="demo-radio-vert-c">Radio Button C</label>
                  </div>
                </div> <!-- field-group -->

                <div class="input-error-msg-container">
                  <span class="js-input-error-msg-span" aria-live="polite" data-error="Please choose an option."></span>
                </div>
              </div> <!-- form-item -->

Custom Address - Short

Show Code

Demo: Custom Address - Short

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Address - Short</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-address--short">
                  <div class="field-group field-group--block-to-inline">

                    <div class="field-group__item field-group__item--custom-address-short-city">
                      <input id="demo-custom-address-short--city" class="js-validate-input" type="text" placeholder="City" required="">
                      <label class="visually-hidden" for="demo-custom-address-short--city">City</label>
                    </div>

                    <div class="field-group__item field-group__item--custom-address-short-state">
                      <label class="visually-hidden" for="demo-custom-address-short--state">State</label>
                      <select id="demo-custom-address-short--state" class="js-validate-input" required="">
                        <option value="" disabled="" selected="">Select a State…</option>

                        <option value="AL">Alabama</option>

                        <option value="AK">Alaska</option>

                        <option value="AS">American Samoa</option>

                        <option value="AZ">Arizona</option>

                        <option value="AR">Arkansas</option>

                        <option value="CA">California</option>

                        <option value="CO">Colorado</option>

                        <option value="CT">Connecticut</option>

                        <option value="DE">Delaware</option>

                        <option value="DC">District Of Columbia</option>

                        <option value="FM">Federated States Of Micronesia</option>

                        <option value="FL">Florida</option>

                        <option value="GA">Georgia</option>

                        <option value="GU">Guam</option>

                        <option value="HI">Hawaii</option>

                        <option value="ID">Idaho</option>

                        <option value="IL">Illinois</option>

                        <option value="IN">Indiana</option>

                        <option value="IA">Iowa</option>

                        <option value="KS">Kansas</option>

                        <option value="KY">Kentucky</option>

                        <option value="LA">Louisiana</option>

                        <option value="ME">Maine</option>

                        <option value="MH">Marshall Islands</option>

                        <option value="MD">Maryland</option>

                        <option value="MA">Massachusetts</option>

                        <option value="MI">Michigan</option>

                        <option value="MN">Minnesota</option>

                        <option value="MS">Mississippi</option>

                        <option value="MO">Missouri</option>

                        <option value="MT">Montana</option>

                        <option value="NE">Nebraska</option>

                        <option value="NV">Nevada</option>

                        <option value="NH">New Hampshire</option>

                        <option value="NJ">New Jersey</option>

                        <option value="NM">New Mexico</option>

                        <option value="NY">New York</option>

                        <option value="NC">North Carolina</option>

                        <option value="ND">North Dakota</option>

                        <option value="MP">Northern Mariana Islands</option>

                        <option value="OH">Ohio</option>

                        <option value="OK">Oklahoma</option>

                        <option value="OR">Oregon</option>

                        <option value="PW">Palau</option>

                        <option value="PA">Pennsylvania</option>

                        <option value="PR">Puerto Rico</option>

                        <option value="RI">Rhode Island</option>

                        <option value="SC">South Carolina</option>

                        <option value="SD">South Dakota</option>

                        <option value="TN">Tennessee</option>

                        <option value="TX">Texas</option>

                        <option value="UT">Utah</option>

                        <option value="VT">Vermont</option>

                        <option value="VI">Virgin Islands</option>

                        <option value="VA">Virginia</option>

                        <option value="WA">Washington</option>

                        <option value="WV">West Virginia</option>

                        <option value="WI">Wisconsin</option>

                        <option value="WY">Wyoming</option>

                      </select>
                    </div>

                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for city and state are required."></span>
                </div>
              </div> <!-- form-item -->

Custom Address - Long

Show Code

Demo: Custom Address - Long

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Address - Long</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-address--long">

                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item custom-address-long--line1">
                      <label class="visually-hidden" for="demo-custom-address-long--line1">Address Line 1</label>
                      <input id="demo-custom-address-long--line1" class="text-input-item js-validate-input js-input-item--text-autocomplete" type="text" placeholder="Address Line 1" autocomplete="off" required="">
                    </div>
                  </div>

                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item custom-address-long--line2">
                      <label class="visually-hidden" for="demo-custom-address-long--line2">Address Line 2</label>
                      <input id="demo-custom-address-long--line2" class="js-validate-input" type="text" placeholder="Address Line 2" data-input-valid="true">
                    </div>
                  </div>

                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item field-group__item--custom-address-long-zip">
                      <input id="demo-custom-address-long--zip" class="js-validate-input js-mask--zip-code" type="text" placeholder="Zip" required="">
                      <label class="visually-hidden" for="demo-custom-address-long--zip">Zip Code</label>
                    </div>

                    <div class="field-group__item field-group__item--custom-address-long-city">
                      <input id="demo-custom-address-long--city" class="js-validate-input" type="text" placeholder="City" required="">
                      <label class="visually-hidden" for="demo-custom-address-long--city">City</label>
                    </div>

                    <div class="field-group__item field-group__item--custom-address-long-state">
                      <label class="visually-hidden" for="demo-custom-address-long--state">State</label>
                      <select id="demo-custom-address-long--state" class="js-validate-input" required="">
                        <option value="" disabled="" selected="">Select a State…</option>

                        <option value="AL">Alabama</option>

                        <option value="AK">Alaska</option>

                        <option value="AS">American Samoa</option>

                        <option value="AZ">Arizona</option>

                        <option value="AR">Arkansas</option>

                        <option value="CA">California</option>

                        <option value="CO">Colorado</option>

                        <option value="CT">Connecticut</option>

                        <option value="DE">Delaware</option>

                        <option value="DC">District Of Columbia</option>

                        <option value="FM">Federated States Of Micronesia</option>

                        <option value="FL">Florida</option>

                        <option value="GA">Georgia</option>

                        <option value="GU">Guam</option>

                        <option value="HI">Hawaii</option>

                        <option value="ID">Idaho</option>

                        <option value="IL">Illinois</option>

                        <option value="IN">Indiana</option>

                        <option value="IA">Iowa</option>

                        <option value="KS">Kansas</option>

                        <option value="KY">Kentucky</option>

                        <option value="LA">Louisiana</option>

                        <option value="ME">Maine</option>

                        <option value="MH">Marshall Islands</option>

                        <option value="MD">Maryland</option>

                        <option value="MA">Massachusetts</option>

                        <option value="MI">Michigan</option>

                        <option value="MN">Minnesota</option>

                        <option value="MS">Mississippi</option>

                        <option value="MO">Missouri</option>

                        <option value="MT">Montana</option>

                        <option value="NE">Nebraska</option>

                        <option value="NV">Nevada</option>

                        <option value="NH">New Hampshire</option>

                        <option value="NJ">New Jersey</option>

                        <option value="NM">New Mexico</option>

                        <option value="NY">New York</option>

                        <option value="NC">North Carolina</option>

                        <option value="ND">North Dakota</option>

                        <option value="MP">Northern Mariana Islands</option>

                        <option value="OH">Ohio</option>

                        <option value="OK">Oklahoma</option>

                        <option value="OR">Oregon</option>

                        <option value="PW">Palau</option>

                        <option value="PA">Pennsylvania</option>

                        <option value="PR">Puerto Rico</option>

                        <option value="RI">Rhode Island</option>

                        <option value="SC">South Carolina</option>

                        <option value="SD">South Dakota</option>

                        <option value="TN">Tennessee</option>

                        <option value="TX">Texas</option>

                        <option value="UT">Utah</option>

                        <option value="VT">Vermont</option>

                        <option value="VI">Virgin Islands</option>

                        <option value="VA">Virginia</option>

                        <option value="WA">Washington</option>

                        <option value="WV">West Virginia</option>

                        <option value="WI">Wisconsin</option>

                        <option value="WY">Wyoming</option>

                      </select>
                    </div>
                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for Address Line 1, Zip Code, city, and state are required."></span>
                </div>
              </div> <!-- form-item -->

Custom Height

Show Code

Demo: Custom Height

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

or

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Height</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-height">
                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item">
                      <input id="demo-custom-height--feet" class="js-custom-height js-custom-height--feet js-validate-input" type="text" placeholder="feet" size="9" maxlength="3">
                      <label class="visually-hidden" for="demo-custom-height--feet">feet</label>
                    </div>

                    <div class="field-group__item">
                      <label class="visually-hidden" for="demo-custom-height--inches">inches</label>
                      <input id="demo-custom-height--inches" class="js-custom-height js-custom-height--inches js-validate-input" type="text" placeholder="inches" size="9" maxlength="3">
                    </div>

                    <span class="custom-height--inches--span">or</span>

                    <div class="field-group__item">
                      <label class="visually-hidden" for="demo-custom-height--cm">centimeters</label>
                      <input id="demo-custom-height--cm" class="js-custom-height js-custom-height--cm js-validate-input" type="text" placeholder="cm" size="9" maxlength="5">
                    </div>
                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span id="custom-height-error-msg" class="js-input-error-msg-span" aria-live="polite" data-error="Please enter your height in either feet and inches, or centimeters."></span>
                </div>
              </div> <!-- form-item -->

Custom Diagnosis - Short

Show Code

Demo: Custom Diagnosis - Short

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Diagnosis - Short</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-diagnosis--short">
                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item">
                      <label for="demo-custom-diagnosis-short--physician">Physician</label>
                      <input id="demo-custom-diagnosis-short--physician" class="js-validate-input" type="text" required="">
                    </div>

                    <div class="field-group__item">
                      <label for="demo-custom-diagnosis-short--date">Date of Diagnosis</label>
                      <input id="demo-custom-diagnosis-short--date" class="js-mask js-mask--date-short js-validate-input" type="text" placeholder="MM/YYYY" required="">
                    </div>
                  </div>

                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item">
                      <label for="demo-custom-diagnosis-short--city">City</label>
                      <input id="demo-custom-diagnosis-short--city" class="js-validate-input" type="text" required="">
                    </div>
                    <div class="field-group__item">
                      <label for="demo-custom-diagnosis-short--state">State</label>
                      <select id="demo-custom-diagnosis-short--state" class="js-validate-input" required="">
                        <option value="" disabled="" selected="">Select a state…</option>

                        <option value="AL">Alabama</option>

                        <option value="AK">Alaska</option>

                        <option value="AS">American Samoa</option>

                        <option value="AZ">Arizona</option>

                        <option value="AR">Arkansas</option>

                        <option value="CA">California</option>

                        <option value="CO">Colorado</option>

                        <option value="CT">Connecticut</option>

                        <option value="DE">Delaware</option>

                        <option value="DC">District Of Columbia</option>

                        <option value="FM">Federated States Of Micronesia</option>

                        <option value="FL">Florida</option>

                        <option value="GA">Georgia</option>

                        <option value="GU">Guam</option>

                        <option value="HI">Hawaii</option>

                        <option value="ID">Idaho</option>

                        <option value="IL">Illinois</option>

                        <option value="IN">Indiana</option>

                        <option value="IA">Iowa</option>

                        <option value="KS">Kansas</option>

                        <option value="KY">Kentucky</option>

                        <option value="LA">Louisiana</option>

                        <option value="ME">Maine</option>

                        <option value="MH">Marshall Islands</option>

                        <option value="MD">Maryland</option>

                        <option value="MA">Massachusetts</option>

                        <option value="MI">Michigan</option>

                        <option value="MN">Minnesota</option>

                        <option value="MS">Mississippi</option>

                        <option value="MO">Missouri</option>

                        <option value="MT">Montana</option>

                        <option value="NE">Nebraska</option>

                        <option value="NV">Nevada</option>

                        <option value="NH">New Hampshire</option>

                        <option value="NJ">New Jersey</option>

                        <option value="NM">New Mexico</option>

                        <option value="NY">New York</option>

                        <option value="NC">North Carolina</option>

                        <option value="ND">North Dakota</option>

                        <option value="MP">Northern Mariana Islands</option>

                        <option value="OH">Ohio</option>

                        <option value="OK">Oklahoma</option>

                        <option value="OR">Oregon</option>

                        <option value="PW">Palau</option>

                        <option value="PA">Pennsylvania</option>

                        <option value="PR">Puerto Rico</option>

                        <option value="RI">Rhode Island</option>

                        <option value="SC">South Carolina</option>

                        <option value="SD">South Dakota</option>

                        <option value="TN">Tennessee</option>

                        <option value="TX">Texas</option>

                        <option value="UT">Utah</option>

                        <option value="VT">Vermont</option>

                        <option value="VI">Virgin Islands</option>

                        <option value="VA">Virginia</option>

                        <option value="WA">Washington</option>

                        <option value="WV">West Virginia</option>

                        <option value="WI">Wisconsin</option>

                        <option value="WY">Wyoming</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span id="custom-diagnosis-short-error-msg" class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for physician, date of diagnosis, city, and state are required."></span>
                </div>
              </div> <!-- form-item -->

Custom Diagnosis - Long

Show Code

Demo: Custom Diagnosis - Long

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Diagnosis - Long</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-diagnosis--long">

                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item field-group__item--custom-diagnosis-long-diagnosis">
                      <label for="demo-custom-diagnosis-long--diagnosis">Diagnosis</label>
                      <input id="demo-custom-diagnosis-long--diagnosis" class="js-validate-input" type="text" required="">
                    </div>

                    <div class="field-group__item field-group__item--custom-diagnosis-long-physician">
                      <label for="demo-custom-diagnosis-long--physician">Physician</label>
                      <input id="demo-custom-diagnosis-long--physician" class="js-validate-input" type="text" required="">
                    </div>
                  </div>

                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item field-group__item--custom-diagnosis-long-date">
                      <label for="demo-custom-diagnosis-long--date">Date of Diagnosis</label>
                      <input id="demo-custom-diagnosis-long--date" class="js-mask js-mask--date-short js-validate-input" type="text" placeholder="MM/YYYY" required="">
                    </div>
                    <div class="field-group__item field-group__item--custom-diagnosis-long-city">
                      <label for="demo-custom-diagnosis-long--city">City</label>
                      <input id="demo-custom-diagnosis-long--city" class="js-validate-input" type="text" required="">
                    </div>
                    <div class="field-group__item field-group__item--custom-diagnosis-long-state">
                      <label for="demo-custom-diagnosis-long--state">State</label>
                      <select id="demo-custom-diagnosis-long--state" class="js-validate-input" required="">
                        <option value="" disabled="" selected="">Select a state…</option>

                        <option value="AL">Alabama</option>

                        <option value="AK">Alaska</option>

                        <option value="AS">American Samoa</option>

                        <option value="AZ">Arizona</option>

                        <option value="AR">Arkansas</option>

                        <option value="CA">California</option>

                        <option value="CO">Colorado</option>

                        <option value="CT">Connecticut</option>

                        <option value="DE">Delaware</option>

                        <option value="DC">District Of Columbia</option>

                        <option value="FM">Federated States Of Micronesia</option>

                        <option value="FL">Florida</option>

                        <option value="GA">Georgia</option>

                        <option value="GU">Guam</option>

                        <option value="HI">Hawaii</option>

                        <option value="ID">Idaho</option>

                        <option value="IL">Illinois</option>

                        <option value="IN">Indiana</option>

                        <option value="IA">Iowa</option>

                        <option value="KS">Kansas</option>

                        <option value="KY">Kentucky</option>

                        <option value="LA">Louisiana</option>

                        <option value="ME">Maine</option>

                        <option value="MH">Marshall Islands</option>

                        <option value="MD">Maryland</option>

                        <option value="MA">Massachusetts</option>

                        <option value="MI">Michigan</option>

                        <option value="MN">Minnesota</option>

                        <option value="MS">Mississippi</option>

                        <option value="MO">Missouri</option>

                        <option value="MT">Montana</option>

                        <option value="NE">Nebraska</option>

                        <option value="NV">Nevada</option>

                        <option value="NH">New Hampshire</option>

                        <option value="NJ">New Jersey</option>

                        <option value="NM">New Mexico</option>

                        <option value="NY">New York</option>

                        <option value="NC">North Carolina</option>

                        <option value="ND">North Dakota</option>

                        <option value="MP">Northern Mariana Islands</option>

                        <option value="OH">Ohio</option>

                        <option value="OK">Oklahoma</option>

                        <option value="OR">Oregon</option>

                        <option value="PW">Palau</option>

                        <option value="PA">Pennsylvania</option>

                        <option value="PR">Puerto Rico</option>

                        <option value="RI">Rhode Island</option>

                        <option value="SC">South Carolina</option>

                        <option value="SD">South Dakota</option>

                        <option value="TN">Tennessee</option>

                        <option value="TX">Texas</option>

                        <option value="UT">Utah</option>

                        <option value="VT">Vermont</option>

                        <option value="VI">Virgin Islands</option>

                        <option value="VA">Virginia</option>

                        <option value="WA">Washington</option>

                        <option value="WV">West Virginia</option>

                        <option value="WI">Wisconsin</option>

                        <option value="WY">Wyoming</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span id="custom-diagnosis-long-error-msg" class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for diagnosis, physician, date of diagnosis, city, and state are required."></span>
                </div>
              </div> <!-- form-item -->

Custom Driver License

Show Code

Demo: Custom Driver License

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Driver License</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-driver-license">
                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item custom-driver-license--number">
                      <label for="demo-custom-driver-license--number">License number</label>
                      <input id="demo-custom-driver-license--number" type="text" class="js-validate-input" placeholder="" required="">
                    </div>
                  </div>

                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item custom-driver-license--state">
                      <label for="demo-custom-driver-license--state">State</label>
                      <select id="demo-custom-driver-license--state" class="js-validate-input" required="">
                        <option value="" disabled="" selected="">Select a state…</option>

                        <option value="AL">Alabama</option>

                        <option value="AK">Alaska</option>

                        <option value="AS">American Samoa</option>

                        <option value="AZ">Arizona</option>

                        <option value="AR">Arkansas</option>

                        <option value="CA">California</option>

                        <option value="CO">Colorado</option>

                        <option value="CT">Connecticut</option>

                        <option value="DE">Delaware</option>

                        <option value="DC">District Of Columbia</option>

                        <option value="FM">Federated States Of Micronesia</option>

                        <option value="FL">Florida</option>

                        <option value="GA">Georgia</option>

                        <option value="GU">Guam</option>

                        <option value="HI">Hawaii</option>

                        <option value="ID">Idaho</option>

                        <option value="IL">Illinois</option>

                        <option value="IN">Indiana</option>

                        <option value="IA">Iowa</option>

                        <option value="KS">Kansas</option>

                        <option value="KY">Kentucky</option>

                        <option value="LA">Louisiana</option>

                        <option value="ME">Maine</option>

                        <option value="MH">Marshall Islands</option>

                        <option value="MD">Maryland</option>

                        <option value="MA">Massachusetts</option>

                        <option value="MI">Michigan</option>

                        <option value="MN">Minnesota</option>

                        <option value="MS">Mississippi</option>

                        <option value="MO">Missouri</option>

                        <option value="MT">Montana</option>

                        <option value="NE">Nebraska</option>

                        <option value="NV">Nevada</option>

                        <option value="NH">New Hampshire</option>

                        <option value="NJ">New Jersey</option>

                        <option value="NM">New Mexico</option>

                        <option value="NY">New York</option>

                        <option value="NC">North Carolina</option>

                        <option value="ND">North Dakota</option>

                        <option value="MP">Northern Mariana Islands</option>

                        <option value="OH">Ohio</option>

                        <option value="OK">Oklahoma</option>

                        <option value="OR">Oregon</option>

                        <option value="PW">Palau</option>

                        <option value="PA">Pennsylvania</option>

                        <option value="PR">Puerto Rico</option>

                        <option value="RI">Rhode Island</option>

                        <option value="SC">South Carolina</option>

                        <option value="SD">South Dakota</option>

                        <option value="TN">Tennessee</option>

                        <option value="TX">Texas</option>

                        <option value="UT">Utah</option>

                        <option value="VT">Vermont</option>

                        <option value="VI">Virgin Islands</option>

                        <option value="VA">Virginia</option>

                        <option value="WA">Washington</option>

                        <option value="WV">West Virginia</option>

                        <option value="WI">Wisconsin</option>

                        <option value="WY">Wyoming</option>

                      </select>
                    </div>

                    <div class="field-group__item custom-driver-license--expiration-date">
                      <label for="demo-custom-driver-license--expiration-date">Expiration Date</label>
                      <input id="demo-custom-driver-license--expiration-date" class="js-mask js-mask--date-long js-validate-input" type="text" placeholder="MM/DD/YYYY" required="">
                    </div>
                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span id="custom-driver-license-error-msg" class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for license number, state, and expiration date are required."></span>
                </div>
              </div> <!-- form-item -->

Custom Phone Number

Show Code

Demo: Custom Phone Number

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Phone Number</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-phone-number">
                  <div class="field-group field-group--inline">
                    <div class="field-group__item field-group__item--hang-label">
                      <input id="demo-custom-phone-number--home" class="js-validate-input" type="radio" name="custom-phone-number--type" value="home" required="">
                      <label for="demo-custom-phone-number--home">Home</label>
                    </div>

                    <div class="field-group__item field-group__item--hang-label">
                      <input id="demo-custom-phone-number--work" class="js-validate-input" type="radio" name="custom-phone-number--type" value="work" required="">
                      <label for="demo-custom-phone-number--work">Work</label>
                    </div>

                    <div class="field-group__item field-group__item--hang-label">
                      <input id="demo-custom-phone-number--mobile" class="js-validate-input" type="radio" name="custom-phone-number--type" value="mobile" required="">
                      <label for="demo-custom-phone-number--mobile">Mobile</label>
                    </div>
                  </div>

                  <div class="field-group">
                    <div class="field-group__item custom-phone-number--phone-number">
                      <input id="demo-custom-phone-number--phone-number" class="js-mask js-mask--phone js-validate-input" type="text" name="custom-phone-number" placeholder="(123) 123-1234" required="">
                      <label class="visually-hidden" for="demo-custom-phone-number--phone-number">phone number</label>
                    </div>
                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span id="custom-phone-number-error-msg" class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for phone number type and phone number are required."></span>
                </div>
              </div> <!-- form-item -->

Custom Surgery

Show Code

Demo: Custom Surgery

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Surgery</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-surgery">
                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item">
                      <label for="demo-custom-surgery--procedure">Procedure</label>
                      <input id="demo-custom-surgery--procedure" class="js-validate-input" type="text" required="">
                    </div>

                    <div class="field-group__item">
                      <label for="demo-custom-surgery--physician">Physician</label>
                      <input id="demo-custom-surgery--physician" class="js-validate-input" type="text" required="">
                    </div>
                  </div>

                  <div class="field-group field-group--block-to-inline">
                    <div class="field-group__item field-group__item--custom-surgery--date">
                      <label for="demo-custom-surgery--date">Date</label>
                      <input id="demo-custom-surgery--date" class="js-mask js-mask--date-short js-validate-input" type="text" placeholder="MM/YYYY" maxlength="9" size="9" required="">
                    </div>

                    <div class="field-group__item field-group__item--custom-surgery--city">
                      <label for="demo-custom-surgery--city">City</label>
                      <input id="demo-custom-surgery--city" class="js-validate-input" type="text" required="">
                    </div>

                    <div class="field-group__item field-group__item--custom-surgery--state">
                      <label for="demo-custom-surgery--state">State</label>
                      <select id="demo-custom-surgery--state" class="js-validate-input" required="">
                        <option value="" disabled="" selected="">Select a state…</option>

                        <option value="AL">Alabama</option>

                        <option value="AK">Alaska</option>

                        <option value="AS">American Samoa</option>

                        <option value="AZ">Arizona</option>

                        <option value="AR">Arkansas</option>

                        <option value="CA">California</option>

                        <option value="CO">Colorado</option>

                        <option value="CT">Connecticut</option>

                        <option value="DE">Delaware</option>

                        <option value="DC">District Of Columbia</option>

                        <option value="FM">Federated States Of Micronesia</option>

                        <option value="FL">Florida</option>

                        <option value="GA">Georgia</option>

                        <option value="GU">Guam</option>

                        <option value="HI">Hawaii</option>

                        <option value="ID">Idaho</option>

                        <option value="IL">Illinois</option>

                        <option value="IN">Indiana</option>

                        <option value="IA">Iowa</option>

                        <option value="KS">Kansas</option>

                        <option value="KY">Kentucky</option>

                        <option value="LA">Louisiana</option>

                        <option value="ME">Maine</option>

                        <option value="MH">Marshall Islands</option>

                        <option value="MD">Maryland</option>

                        <option value="MA">Massachusetts</option>

                        <option value="MI">Michigan</option>

                        <option value="MN">Minnesota</option>

                        <option value="MS">Mississippi</option>

                        <option value="MO">Missouri</option>

                        <option value="MT">Montana</option>

                        <option value="NE">Nebraska</option>

                        <option value="NV">Nevada</option>

                        <option value="NH">New Hampshire</option>

                        <option value="NJ">New Jersey</option>

                        <option value="NM">New Mexico</option>

                        <option value="NY">New York</option>

                        <option value="NC">North Carolina</option>

                        <option value="ND">North Dakota</option>

                        <option value="MP">Northern Mariana Islands</option>

                        <option value="OH">Ohio</option>

                        <option value="OK">Oklahoma</option>

                        <option value="OR">Oregon</option>

                        <option value="PW">Palau</option>

                        <option value="PA">Pennsylvania</option>

                        <option value="PR">Puerto Rico</option>

                        <option value="RI">Rhode Island</option>

                        <option value="SC">South Carolina</option>

                        <option value="SD">South Dakota</option>

                        <option value="TN">Tennessee</option>

                        <option value="TX">Texas</option>

                        <option value="UT">Utah</option>

                        <option value="VT">Vermont</option>

                        <option value="VI">Virgin Islands</option>

                        <option value="VA">Virginia</option>

                        <option value="WA">Washington</option>

                        <option value="WV">West Virginia</option>

                        <option value="WI">Wisconsin</option>

                        <option value="WY">Wyoming</option>

                      </select>
                    </div>
                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span id="custom-surgery-error-msg" class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for procedure, physician, date, city, and state are required."></span>
                </div>
              </div> <!-- form-item -->

Custom Name - Long

Show Code

Demo: Custom Name - Long

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
                <h2 class="form-item__question">Demo: Custom Name - Long</h2>
                <div class="form-item__prompt">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="app-component--custom-name-long">
                  <div class="field-group field-group--block-to-inline">

                    <div class="field-group__item">
                      <label class="visually-hidden" for="demo-custom-name-long--first">First Name</label>
                      <input id="demo-custom-name-long--first" class="js-validate-input" type="text" placeholder="First Name" required="">
                    </div>

                    <div class="field-group__item">
                      <label class="visually-hidden" for="demo-custom-name-long--middle">Middle Name</label>
                      <input id="demo-custom-name-long--middle" class="js-validate-input" type="text" placeholder="Middle Name" data-input-valid="true">
                    </div>

                    <div class="field-group__item">
                      <label class="visually-hidden" for="demo-custom-name-long--last">Last Name</label>
                      <input id="demo-custom-name-long--last" class="js-validate-input" type="text" placeholder="Last Name" required="">
                    </div>
                  </div>
                </div>

                <div class="input-error-msg-container">
                  <span id="custom-name-long-error-msg" class="js-input-error-msg-span" aria-live="polite" data-error="Input fields for first and last name are required."></span>
                </div>
              </div> <!-- form-item -->

Custom Beneficiary

Show Code

Demo: Custom Beneficiary

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Code Snip Copy to clipboard

<div class="form-item js-validate-group">
  <h2 class="form-item__question">Demo: Custom Beneficiary</h2>
  <div class="form-item__prompt">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
  </div>
  <div class="app-component--custom-beneficiary">
    <div class="field-group-wrap">
      <label>Full Name</label>
      <div class="field-group field-group--block-to-inline">

        <div class="field-group__item">
          <label class="visually-hidden" for="demo-custom-beneficiary-name-long--first">First Name</label>
          <input id="demo-custom-beneficiary-name-long--first" class="js-validate-input" type="text" placeholder="First Name" required="">
        </div>

        <div class="field-group__item">
          <label class="visually-hidden" for="demo-custom-beneficiary-name-long--middle">Middle Name</label>
          <input id="demo-custom-beneficiary-name-long--middle" class="js-validate-input" type="text" placeholder="Middle Name" data-input-valid="true">
        </div>

        <div class="field-group__item">
          <label class="visually-hidden" for="demo-custom-beneficiary-name-long--last">Last Name</label>
          <input id="demo-custom-beneficiary-name-long--last" class="js-validate-input" type="text" placeholder="Last Name" required="">
        </div>
      </div> <!-- field-group -->
    </div> <!-- field-group-wrap -->

    <div class="field-group-wrap">
      <label>Address</label>
      <div class="field-group field-group--block-to-inline">
        <div class="field-group__item field-group__item--custom-beneficiary-address-long-line1">
          <label class="visually-hidden" for="demo-custom-beneficiary-address-long--line1">Address Line 1</label>
          <input id="demo-custom-beneficiary-address-long--line1" class="text-input-item js-input-item--text-autocomplete js-validate-input" type="text" placeholder="Address Line 1" autocomplete="off" required="">
        </div>
      </div> <!-- field-group -->
      <div class="field-group field-group--block-to-inline">
        <div class="field-group__item field-group__item--custom-beneficiary-address-long-line2">
          <label class="visually-hidden" for="demo-custom-beneficiary-address-long--line2">Address Line 2</label>
          <input id="demo-custom-beneficiary-address-long--line2" class="js-validate-input" type="text" placeholder="Address Line 2" data-input-valid="true">
        </div>
      </div> <!-- field-group -->
      <div class="field-group field-group--block-to-inline">
        <div class="field-group__item field-group__item--custom-beneficiary-address-long-zip">
          <input id="demo-custom-beneficiary-address-long--zip" class="js-validate-input js-mask--zip-code" type="text" placeholder="Zip" required="">
          <label class="visually-hidden" for="demo-custom-beneficiary-address-long--zip">Zip Code</label>
        </div>
        <div class="field-group__item field-group__item--custom-beneficiary-address-long-city">
          <input id="demo-custom-beneficiary-address-long--city" class="js-validate-input" type="text" placeholder="City" required="">
          <label class="visually-hidden" for="demo-custom-beneficiary-address-long--city">City</label>
        </div>
        <div class="field-group__item field-group__item--custom-beneficiary-address-long-state">
          <label class="visually-hidden" for="demo-custom-beneficiary-address-long--state">State</label>
          <select id="demo-custom-beneficiary-address-long--state" class="js-validate-input" required="">
            <option value="" disabled="" selected="">Select a State…</option>

            <option value="AL">Alabama</option>

            <option value="AK">Alaska</option>

            <option value="AS">American Samoa</option>

            <option value="AZ">Arizona</option>

            <option value="AR">Arkansas</option>

            <option value="CA">California</option>

            <option value="CO">Colorado</option>

            <option value="CT">Connecticut</option>

            <option value="DE">Delaware</option>

            <option value="DC">District Of Columbia</option>

            <option value="FM">Federated States Of Micronesia</option>

            <option value="FL">Florida</option>

            <option value="GA">Georgia</option>

            <option value="GU">Guam</option>

            <option value="HI">Hawaii</option>

            <option value="ID">Idaho</option>

            <option value="IL">Illinois</option>

            <option value="IN">Indiana</option>

            <option value="IA">Iowa</option>

            <option value="KS">Kansas</option>

            <option value="KY">Kentucky</option>

            <option value="LA">Louisiana</option>

            <option value="ME">Maine</option>

            <option value="MH">Marshall Islands</option>

            <option value="MD">Maryland</option>

            <option value="MA">Massachusetts</option>

            <option value="MI">Michigan</option>

            <option value="MN">Minnesota</option>

            <option value="MS">Mississippi</option>

            <option value="MO">Missouri</option>

            <option value="MT">Montana</option>

            <option value="NE">Nebraska</option>

            <option value="NV">Nevada</option>

            <option value="NH">New Hampshire</option>

            <option value="NJ">New Jersey</option>

            <option value="NM">New Mexico</option>

            <option value="NY">New York</option>

            <option value="NC">North Carolina</option>

            <option value="ND">North Dakota</option>

            <option value="MP">Northern Mariana Islands</option>

            <option value="OH">Ohio</option>

            <option value="OK">Oklahoma</option>

            <option value="OR">Oregon</option>

            <option value="PW">Palau</option>

            <option value="PA">Pennsylvania</option>

            <option value="PR">Puerto Rico</option>

            <option value="RI">Rhode Island</option>

            <option value="SC">South Carolina</option>

            <option value="SD">South Dakota</option>

            <option value="TN">Tennessee</option>

            <option value="TX">Texas</option>

            <option value="UT">Utah</option>

            <option value="VT">Vermont</option>

            <option value="VI">Virgin Islands</option>

            <option value="VA">Virginia</option>

            <option value="WA">Washington</option>

            <option value="WV">West Virginia</option>

            <option value="WI">Wisconsin</option>

            <option value="WY">Wyoming</option>

          </select>
        </div>
      </div> <!-- field-group -->
    </div> <!-- field-group-wrap -->

    <div class="field-group-wrap">
      <label>Phone</label>
      <div class="field-group field-group--inline">
        <div class="field-group__item field-group__item--hang-label">
          <input id="demo-custom-beneficiary-phone-number--home" class="js-validate-input" type="radio" name="custom-beneficiary-phone-number--type" value="home" required="">
          <label for="demo-custom-beneficiary-phone-number--home">Home</label>
        </div>
        <div class="field-group__item field-group__item--hang-label">
          <input id="demo-custom-beneficiary-phone-number--work" class="js-validate-input" type="radio" name="custom-beneficiary-phone-number--type" value="work" required="">
          <label for="demo-custom-beneficiary-phone-number--work">Work</label>
        </div>
        <div class="field-group__item field-group__item--hang-label">
          <input id="demo-custom-beneficiary-phone-number--mobile" class="js-validate-input" type="radio" name="custom-beneficiary-phone-number--type" value="mobile" required="">
          <label for="demo-custom-beneficiary-phone-number--mobile">Mobile</label>
        </div>
      </div> <!-- field-group -->

      <div class="field-group field-group--block-to-inline">
        <div class="field-group__item field-group__item--custom-beneficiary-phone-number-phone-number">
          <label class="visually-hidden" for="demo-custom-beneficiary-phone-number--phone-number">phone number</label>
          <input id="demo-custom-beneficiary-phone-number--phone-number" class="js-mask js-mask--phone js-validate-input" type="text" name="custom-beneficiary-phone-number" placeholder="(123) 123-1234" required="">
        </div>
      </div> <!-- field-group -->
    </div> <!-- field-group-wrap -->

    <div class="field-group-wrap">
      <div class="field-group field-group--block-to-inline">
        <div class="field-group__item">
          <label for="demo-custom-beneficiary-ssn">Social Security Number</label>
          <input id="demo-custom-beneficiary-ssn" class="js-mask js-mask--ssn js-validate-input" type="text" placeholder="000-00-0000" required="">
        </div>

        <div class="field-group__item">
          <label for="demo-custom-beneficiary-date--long">Date of Birth</label>
          <input id="demo-custom-beneficiary-date--long" class="js-mask js-mask--date-long js-validate-input" type="text" placeholder="MM/DD/YYYY" required="">
        </div>
      </div> <!-- field-group -->
    </div> <!-- field-group-wrap -->
  </div> <!-- app component -->

  <div class="input-error-msg-container">
    <span class="js-input-error-msg-span" aria-live="polite" data-error="Please answer required fields outlined in red."></span>
  </div>

</div> <!-- form-item -->