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:

SHOW DETAILS HIDE DETAILS

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

Form-level alerts

Alerts draw a user’s attention to a change in the status of a form or page. Form-level alerts reflect a user or system action and appear below the form title. Field-level alerts appear inline with input fields and can highlight successful submissions, errors that need to be corrected, or details to know before submitting a form.


You can also add an explanation to the alert.
This is a link below the explanation This is a link below the explanation
You can also add an explanation to the alert. This is a link below the explanation This is a link below the explanation
This is an optional explanation of the error.
This is an optional explanation of the success message.
This is an optional explanation of the warning.
SHOW DETAILS HIDE DETAILS

HTML code snippet

<div>
  <cfpb-alert message="Information alert" />

  <br>

  <cfpb-alert message="Information alert">
    <span>You can also add an explanation to the alert.</span>
  </cfpb-alert>

  <br>

  <cfpb-alert message="Information alert">
    <span>
      You can also add an explanation to the alert.
    </span>
    <cfpb-list>
      <cfpb-link><a href="/">This is a link below the explanation</a></cfpb-link>
      <cfpb-link link-variant="external"><a href="/">This is a link below the explanation</a></cfpb-link>
    </cfpb-list>
  </cfpb-alert>

  <br>

  <cfpb-alert status="error" message="Page not found">
    <span>This is an optional explanation of the error.</span>
    <cfpb-list>
      <cfpb-link><a href="/">This is a link below the explanation</a></cfpb-link>
      <cfpb-link link-variant="external"><a href="/">This is a link below the explanation</a></cfpb-link>
    </cfpb-list>
  </cfpb-alert>

  <br>

  <cfpb-alert status="success" message="11 results">
    <span>This is an optional explanation of the success message.</span>
  </cfpb-alert>
  
  <br>

  <cfpb-alert status="warning" message="No results found">
    <span>This is an optional explanation of the warning.</span>
  </cfpb-alert>

  <br>

  <cfpb-alert status="loading" message="Loading…" />
</div>

Tagline

A US gov branded tagline.



USA
SHOW DETAILS HIDE DETAILS

HTML code snippet

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

Link

A standard link.

SHOW DETAILS HIDE DETAILS

Icon and Text

A basic pairing of an SVG icon and text.

No icon
Icon, but no divider
Icon on left
Icon on right
Icon on both sides
Disabled state
Warning state
Style as standard link (desktop underline)
Style as inline link (always underline)
No underline

The following section allows interacting with the API.

Example icon-text component

SHOW DETAILS HIDE DETAILS

HTML code snippet

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

Button

A basic button in web component syntax.

This is a button
This is a submit button
This is a reset button
This is a secondary button
This is a warning button
This is a disabled primary button
This is a disabled secondary button
This is a button styled as a link
This is a disabled button styled as a link
This is a button styled as a link with an icon
This is a link styled as a button with an icon
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

SHOW DETAILS HIDE DETAILS

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 href="#" style-as-link>This is a button styled as a link</cfpb-button> <cfpb-button href="#" style-as-link icon-right="download">This is a button styled as a link with an icon</cfpb-button>

File upload

Allows files to be selected for upload.

Select file
SHOW DETAILS HIDE DETAILS

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
SHOW DETAILS HIDE DETAILS

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

SHOW DETAILS HIDE DETAILS

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>

List

A list element.

Item 1 Item 2 Item 3 Item 1 Item 2 Item 3

Compact variant:

Item 1 Item 2 Item 3

Horizontal variant:

Item 1 Item 2 Item 3

Wide variant:

Item 1 Item 2 Item 3

Inline links:

Item 1 Item 2 Item 3
Standard links:

Item 1 Item 2 Item 3
SHOW DETAILS HIDE DETAILS

HTML code snippet

<cfpb-list>
  <cfpb-link><a href="#">Item 1</a></cfpb-link>
  <cfpb-link><a href="#">Item 2</a></cfpb-link>
  <cfpb-link><a href="#">Item 3</a></cfpb-link>
</cfpb-list> <cfpb-list gap="compact">
  <cfpb-link><a href="#">Item 1</a></cfpb-link>
  <cfpb-link><a href="#">Item 2</a></cfpb-link>
  <cfpb-link><a href="#">Item 3</a></cfpb-link>
</cfpb-list> <cfpb-list horizontal>
  <cfpb-list-item>Item 1</cfpb-list-item>
  <cfpb-list-item>Item 2</cfpb-list-item>
  <cfpb-list-item>Item 3</cfpb-list-item>
</cfpb-list>

Topic tag

Tag element for topics.

Option 1 Option 2 Option 3
SHOW DETAILS HIDE DETAILS

HTML code snippet

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

Filter tag

Tag element for filters.

Option 1
SHOW DETAILS HIDE DETAILS

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.


SHOW DETAILS HIDE DETAILS

HTML code snippet

<cfpb-list horizontal>
  <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-list>

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
SHOW DETAILS HIDE DETAILS

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.

SHOW DETAILS HIDE DETAILS

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.

SHOW DETAILS HIDE DETAILS

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
SHOW DETAILS HIDE DETAILS

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.

SHOW DETAILS HIDE DETAILS

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

SHOW DETAILS HIDE DETAILS

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


SHOW DETAILS HIDE DETAILS

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
SHOW DETAILS HIDE DETAILS

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.

SHOW DETAILS HIDE DETAILS

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