Web Components

Elements

The components are custom elements (web components).

Types

Button

A basic button in web component syntax.

This is a button

HTML code snippet

<cfpb-button>This is a button</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.

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>

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 tag group API.



Events dispatched:

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>

Latest updates

Page last edited:
Show all details
Edit page