Web Components
Elements
The components are custom elements (web components).
Types
Button
A basic button in web component syntax.
The following section allows interacting with the button API.
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.
HTML code snippet
<cfpb-file-upload>Select file</cfpb-file-upload>Checkbox
A checkbox component.
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.
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.
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.
HTML code snippet
<cfpb-tag-filter>
Option 1
</cfpb-tag-filter>Filter tag group
A group of filter Tag elements.
The following section allows interacting with the tag group 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>Multiselect
A select component that can have multiple selections.
HTML code snippet
<cfpb-multiselect>
<select multiple>
<option>
Mercury
</option>
<option>
Venus
</option>
<option>
Earth
</option>
<option>
Mars
</option>
<option>
Jupiter
</option>
<option>
Saturn
</option>
<option>
Uranus
</option>
<option>
Neptune
</option>
</select>
</cfpb-multiselect>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>