Web Components

Reference for custom elements

These components are custom elements (web components).

Types

Icons

Lazy-loaded icons that are included via a name property, and colorized via color keyword property.

Color set via property on component:




Color set by `color` style set on parent element:



Animate icons by adding the `spin` attribute:

HTML code snippet

<div>
  <cfpb-icon name="approved" />
  <cfpb-icon name="approved" color="gray" />
  <cfpb-icon name="approved" color="red" />
  <cfpb-icon name="approved" color="gold" />
  <cfpb-icon name="approved" color="green" />

  <br>

  <cfpb-icon name="error-round" />
  <cfpb-icon name="error-round" color="gray-80" />
  <cfpb-icon name="error-round" color="red-60" />
  <cfpb-icon name="error-round" color="gold-40" />
  <cfpb-icon name="error-round" color="green-20" />

  <br>

  <cfpb-icon name="update" spin />
</div>

Tagline

A US gov branded tagline.



USA

HTML code snippet

<div>
  <cfpb-tagline></cfpb-tagline>
  <cfpb-tagline islarge></cfpb-tagline>
  <cfpb-tagline>USA</cfpb-tagline>
</div>

Icon and Text

A basic pairing of an SVG icon and text.

No icon
Icon on left
Icon on right
Icon on both sides
Disabled state
Warning state

The following section allows interacting with the API.

Example icon-text component

HTML code snippet

<cfpb-icon-text>No icon</cfpb-icon-text> <cfpb-icon-text iconleft="download">Icon on left</cfpb-icon-text> <cfpb-icon-text iconright="download">Icon on right</cfpb-icon-text> <cfpb-icon-text iconleft="bank" iconright="download">Icon on both sides</cfpb-icon-text> <cfpb-icon-text disabled iconright="download">Disabled state</cfpb-icon-text>

Button

A basic button in web component syntax.

This is a button
This is a button link
This is a disabled button link
This is a button styled as a link
This is a button with an icon
This is a disabled button with an icon

The following section allows interacting with the API.

Example button

HTML code snippet

<cfpb-button>This is a button</cfpb-button> <cfpb-button href="#" full-on-mobile>This is a button link</cfpb-button> <cfpb-button disabled>This is a disabled button link</cfpb-button> <cfpb-button style-as-link href="#">This is a button styled as a link</cfpb-button>

File upload

Allows files to be selected for upload.

Select file

HTML code snippet

<cfpb-file-upload>Select file</cfpb-file-upload>

Checkbox

A checkbox component.

Checkbox icons:



The following section allows interacting with the API.




Gold
Gold
Gold
Gold
Gold
Gold
Gold
Gold
Gold
Gold

HTML code snippet

<cfpb-form-choice>
  Gold
</cfpb-form-choice>
<cfpb-form-choice disabled>
  Gold
</cfpb-form-choice>
<cfpb-form-choice validation="success">
  Gold
</cfpb-form-choice>
<cfpb-form-choice validation="warning">
  Gold
</cfpb-form-choice>
<cfpb-form-choice validation="error">
  Gold
</cfpb-form-choice>
<cfpb-form-choice large>
  Gold
</cfpb-form-choice>
<cfpb-form-choice large disabled>
  Gold
</cfpb-form-choice>

Radio button

A radio button component.

Gold
Gold
Gold
Gold
Gold
Gold
Gold
Gold
Gold
Gold

The following section allows interacting with the API.

Form choice example

HTML code snippet

<cfpb-form-choice type="radio">
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" disabled>
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" validation="success">
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" validation="warning">
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" validation="error">
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" large>
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" large disabled>
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" large validation="success">
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" large validation="warning">
  Gold
</cfpb-form-choice>
<cfpb-form-choice type="radio" large validation="error">
  Gold
</cfpb-form-choice>

Topic tag

Tag element for topics.

Option 1 Option 2 Option 3

HTML code snippet

<cfpb-tag-group stacked>
  <cfpb-tag-topic>
    Option 1
  </cfpb-tag-topic>
  <cfpb-tag-topic href="#">
    Option 2
  </cfpb-tag-topic>
  <cfpb-tag-topic href="#">
    Option 3
  </cfpb-tag-topic>
</cfpb-tag-group>

Filter tag

Tag element for filters.

Option 1

HTML code snippet

<cfpb-tag-filter>
  Option 1
</cfpb-tag-filter>

Filter tag group

A group of filter Tag elements.

Option 1 Option 2 Option 3

The following section allows interacting with the API.


HTML code snippet

<cfpb-tag-group>
  <cfpb-tag-filter>
    Option 1
  </cfpb-tag-filter>
  <cfpb-tag-filter>
    Option 2
  </cfpb-tag-filter>
  <cfpb-tag-filter>
    Option 3
  </cfpb-tag-filter>
</cfpb-tag-group>

Label

A label component.

This is a label


This is a label
With helper text


This is a label
With a block-level helper text

HTML code snippet

<cfpb-label>
  <div slot="label">This is a label</div>
</cfpb-label>
<cfpb-label>
  <div slot="label">This is a label</div>
  <div slot="helper">With helper text</div>
</cfpb-label>
<cfpb-label block>
  <div slot="label">This is a label</div>
  <div slot="helper">With a block-level helper text</div>
</cfpb-label>

Search input

A search input component.








The following section allows interacting with the API.

HTML code snippet

<cfpb-form-search-input borderless> </cfpb-form-search-input>
<cfpb-form-search-input> </cfpb-form-search-input>
<cfpb-form-search-input disabled> </cfpb-form-search-input>
<cfpb-form-search-input validation="error"> </cfpb-form-search-input>
<cfpb-form-search-input validation="warning"> </cfpb-form-search-input>
<cfpb-form-search-input validation="success"> </cfpb-form-search-input>

Search widget

A search widget component.

HTML code snippet

<cfpb-form-search>
  <ul hidden>
    <li>How do I add money to my prepaid card?</li>
    <li>What are credit card “add-on products?”</li>
    <li>How do I qualify for an advertised 0% auto financing?</li>
    <li>Can I make additional payments on my student loan?</li>
    <li>How do I tell if I have a fixed or adjustable rate mortgage?</li>
    <li>I was offered a pension advance. What is this? What should I look out for?</li>
    <li>What are rate caps with an adjustable-rate mortgage (ARM), and how do they work?</li>
    <li>For an adjustable-rate mortgage (ARM), what are the index and margin, and how do they work?</li>
  </ul>
</cfpb-form-search>

Form-level alert

A form-level alert component.

An error A warning A success message

HTML code snippet

<cfpb-form-alert validation="error">An error</cfpb-form-alert> <cfpb-form-alert validation="warning">A warning</cfpb-form-alert> <cfpb-form-alert validation="success">A success message</cfpb-form-alert>

Pagination

A pagination component.

HTML code snippet

<cfpb-pagination value="4" max="10">
  <i18n-service>
    <template>
      {
        "en": {
          "page number": "Page number",
          "previous": "Older",
          "next": "Newer",
          "page": "Page",
          "out of": "out of",
          "of": "of",
          "total pages": "total pages",
          "go": "Go"
        },
        "es": {
          "page number": "Número de página",
          "previous": "Anterior",
          "next": "Siguiente",
          "page": "Página",
          "out of": "de",
          "of": "de",
          "total pages": "páginas en total",
          "go": "Ir"
        }
      }
    </template>
  </i18n-service>
</cfpb-pagination>

Listbox item

A Listbox item component.

Earth Jupiter Mercury Venus Mars Saturn Uranus Pluto

The following section allows interacting with the Listbox item API.

Ceres

HTML code snippet

<cfpb-listbox-item disabled>Earth</cfpb-listbox-item> <cfpb-listbox-item checked disabled>Jupiter</cfpb-listbox-item> <cfpb-listbox-item type="checkbox">Mercury</cfpb-listbox-item> <cfpb-listbox-item type="checkbox" checked>Venus</cfpb-listbox-item> <cfpb-listbox-item type="check">Mars</cfpb-listbox-item> <cfpb-listbox-item type="check" checked>Saturn</cfpb-listbox-item> <cfpb-listbox-item type="plain">Uranus</cfpb-listbox-item> <cfpb-listbox-item type="plain" checked>Pluto</cfpb-listbox-item>

Listboxes

A listbox component.

Mercury Venus Earth Mars Jupiter Saturn Uranus Neptune

Mercury Venus Earth Mars Jupiter Saturn Uranus Neptune

Mercury Venus Earth Mars Jupiter Saturn Uranus Neptune

The following section allows interacting with the Listbox item API.

Mercury Venus Earth Mars Jupiter Saturn Uranus Neptune

# of visible items

# of checked items

# of checked and visible items


HTML code snippet

<cfpb-listbox aria-label="List of planets">
  <cfpb-listbox-item>Mercury</cfpb-listbox-item>
  <cfpb-listbox-item>Venus</cfpb-listbox-item>
  <cfpb-listbox-item>Earth</cfpb-listbox-item>
  <cfpb-listbox-item>Mars</cfpb-listbox-item>
  <cfpb-listbox-item>Jupiter</cfpb-listbox-item>
  <cfpb-listbox-item>Saturn</cfpb-listbox-item>
  <cfpb-listbox-item>Uranus</cfpb-listbox-item>
  <cfpb-listbox-item>Neptune</cfpb-listbox-item>
</cfpb-listbox>
<cfpb-listbox aria-label="List of planets" type="check">
  <cfpb-listbox-item>Mercury</cfpb-listbox-item>
  <cfpb-listbox-item>Venus</cfpb-listbox-item>
  <cfpb-listbox-item>Earth</cfpb-listbox-item>
  <cfpb-listbox-item checked>Mars</cfpb-listbox-item>
  <cfpb-listbox-item>Jupiter</cfpb-listbox-item>
  <cfpb-listbox-item>Saturn</cfpb-listbox-item>
  <cfpb-listbox-item>Uranus</cfpb-listbox-item>
  <cfpb-listbox-item>Neptune</cfpb-listbox-item>
</cfpb-listbox>
<cfpb-listbox aria-label="List of planets" type="checkbox">
  <cfpb-listbox-item>Mercury</cfpb-listbox-item>
  <cfpb-listbox-item>Venus</cfpb-listbox-item>
  <cfpb-listbox-item>Earth</cfpb-listbox-item>
  <cfpb-listbox-item checked>Mars</cfpb-listbox-item>
  <cfpb-listbox-item>Jupiter</cfpb-listbox-item>
  <cfpb-listbox-item>Saturn</cfpb-listbox-item>
  <cfpb-listbox-item>Uranus</cfpb-listbox-item>
  <cfpb-listbox-item>Neptune</cfpb-listbox-item>
</cfpb-listbox>

Select list

A select list component.

  • Mercury
  • Venus
  • Earth
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune


  • Mercury
  • Venus
  • Earth
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune

HTML code snippet

<cfpb-select multiple>
    <ul>
      <li>
        Mercury
      </li>
      <li>
        Venus
      </li>
      <li data-checked>
        Earth
      </li>
      <li checked>
        Mars
      </li>
      <li>
        Jupiter
      </li>
      <li>
        Saturn
      </li>
      <li>
        Uranus
      </li>
      <li>
        Neptune
      </li>
    </ul>
  </cfpb-select>

Expandables

An expandable component.

Expandable header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque ipsa voluptatibus soluta nobis unde quisquam temporibus magnam debitis quidem. Ducimus ratione corporis nesciunt earum vel est quaerat blanditiis dolore ipsa? Lorem link.

HTML code snippet

<cfpb-expandable>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Neque ipsa voluptatibus soluta nobis unde quisquam
      temporibus magnam debitis quidem. Ducimus ratione
      corporis nesciunt earum vel est quaerat blanditiis
      dolore ipsa?
      <a href="#">Lorem link</a>.
  </p>
</cfpb-expandable>

Latest updates

Page last edited:
Show all details
Edit page