Infineon Design System - HTML CDN Example

Accordion

Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Controls

Toggle AutoCollapse

Toggle Icon

ariaLevelNumber:

autoCollapse:

icon:

View Code

<ifx-accordion auto-collapse="false">
      <ifx-accordion-item caption="Label" open="true" aria-level-number="3" icon="">Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
      <ifx-accordion-item caption="Label" open="false" aria-level-number="3" icon="">Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
      <ifx-accordion-item caption="Label" open="false" aria-level-number="3" icon="">Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
    </ifx-accordion>

Action List

Controls

Toggle Disabled

Toggle Target

disabled:

href:

target:

value:

itemTitle:

description:

listAriaLabel:

itemAriaLabel:

View Code

<ifx-action-list list-aria-label="Navigation menu">
      <ifx-action-list-item item-title="Dashboard" description="View your main dashboard" value="dashboard" item-aria-label="Navigation item">
        <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
      </ifx-action-list-item>
      <ifx-action-list-item item-title="Settings" value="settings" item-aria-label="Navigation item">
        <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
      </ifx-action-list-item>
      <ifx-action-list-item item-title="Profile" description="Manage your profile information" value="profile" disabled="true" item-aria-label="Navigation item">
        <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
      </ifx-action-list-item>
      <ifx-action-list-item item-title="Advanced Analytics and Reporting Dashboard with Extended Functionality" description="This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics." value="analytics" item-aria-label="Navigation item">
        <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
      </ifx-action-list-item>
    </ifx-action-list>

Alert

Attention! This is an alert message — check it out!

Controls

Toggle Variant

Toggle Icon

Toggle Closable

Toggle AriaLiveText

variant:

icon:

closable:

ariaLiveText:

View Code

<ifx-alert aria-live-text="assertive" variant="primary" icon="c-info-16" closable="true">Attention! This is an alert message — check it out!</ifx-alert>

AI Label

Controls

Toggle Divider

Toggle Variant

divider:

variant:

View Code

<ifx-ai-label divider="true" variant="label"></ifx-ai-label>

Button

Controls

Toggle Icon

Toggle Variant

Toggle Theme

Toggle Type

Toggle Size

Toggle FullWidth

Toggle Disabled

Toggle IconPosition

Toggle Href

Toggle Target

icon:

variant:

ariaLabelText:

theme:

type:

size:

fullWidth:

disabled:

iconPosition:

href:

url:

target:

View Code

<ifx-button type="button" aria-label-text="Button" variant="primary" size="m" target="_blank" theme="default" full-width="false" disabled="false" href="false">Button</ifx-button>

Card

Overline

Headline

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Controls

Toggle Direction

Toggle Position

Toggle Target

Toggle FullWidth

direction:

ariaLabelText:

position:

href:

target:

src:

alt:

fullWidth:

View Code

<ifx-card direction="vertical" href="" target="_blank" aria-label="" aria-label-text="Card" full-width="false">
      <ifx-card-image position="right" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg" alt="Coffee" slot="img"></ifx-card-image>
      <ifx-card-overline>Overline</ifx-card-overline>
      <ifx-card-headline>Headline</ifx-card-headline>
      <ifx-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</ifx-card-text>
      <ifx-card-links slot="buttons">
        <ifx-button variant="primary">Button</ifx-button>
        <ifx-button variant="secondary">Button</ifx-button>
      </ifx-card-links>
    </ifx-card>

Checkbox

Text

Controls

Toggle Error

Toggle Disabled

Toggle Checked

Toggle Indeterminate

Toggle Size

error:

disabled:

checked:

indeterminate:

size:

name:

View Code

<ifx-checkbox error="false" disabled="false" checked="false" size="s" indeterminate="false" name="checkbox">Text</ifx-checkbox>

Checkbox Group

Option 0

Option 1

Option 2

Controls

Toggle Alignment

Toggle Size

Toggle Checked

Toggle Disabled

Toggle Error

Toggle Indeterminate

Toggle ShowGroupLabel

Toggle ShowCaption

Toggle ShowCaptionIcon

Toggle Required

alignment:

size:

checked:

disabled:

error:

indeterminate:

showGroupLabel:

groupLabelText:

showCaption:

captionText:

showCaptionIcon:

required:

View Code

<ifx-checkbox-group alignment="vertical" group-label-text="Group Label" caption-text="Caption text, description, error notification" size="m" show-group-label="false" show-caption="false" show-caption-icon="false" required="false">
      <ifx-checkbox value="0" size="m">Option 0</ifx-checkbox>
      <ifx-checkbox value="1" size="m">Option 1</ifx-checkbox>
      <ifx-checkbox value="2" size="m">Option 2</ifx-checkbox>
    </ifx-checkbox-group>

Chip

Item Label 1

Item Label 2

Item Label 3

Item Label 4

Controls

Toggle Size

Toggle Variant

Toggle Theme

Toggle ReadOnly

Toggle Icon

Toggle Disabled

Toggle Selected

placeholder:

size:

variant:

theme:

readOnly:

icon:

disabled:

ariaLabel:

selected:

value:

View Code

<ifx-chip placeholder="Label" size="medium" variant="single" theme="outlined" icon="" aria-label="Chip" read-only="false" value="Item Value" disabled="false">
      <ifx-chip-item value="Item Value 1">Item Label 1</ifx-chip-item>
      <ifx-chip-item value="Item Value 2">Item Label 2</ifx-chip-item>
      <ifx-chip-item value="Item Value 3">Item Label 3</ifx-chip-item>
      <ifx-chip-item value="Item Value 4">Item Label 4</ifx-chip-item>
    </ifx-chip>

Content Switcher

Controls

Toggle Selected

Toggle Icon

value:

selected:

icon:

View Code

<ifx-content-switcher>
      <ifx-content-switcher-item value="item 1">
        <ifx-icon icon="applications-16"></ifx-icon>
      </ifx-content-switcher-item>
      <ifx-content-switcher-item value="item 2">
        <ifx-icon icon="applications-16"></ifx-icon>
      </ifx-content-switcher-item>
      <ifx-content-switcher-item value="item 3">
        <ifx-icon icon="applications-16"></ifx-icon>
      </ifx-content-switcher-item>
      <ifx-content-switcher-item value="item 4">
        <ifx-icon icon="applications-16"></ifx-icon>
      </ifx-content-switcher-item>
    </ifx-content-switcher>

Date Picker

Controls

Toggle Disabled

Toggle Success

Toggle Error

Toggle Size

Toggle Required

Toggle Type

label:

caption:

min:

max:

disabled:

success:

error:

size:

name:

value:

ariaLabelText:

required:

autocomplete:

type:

clearSelection:

View Code

<ifx-date-picker name="date-picker" error="false" disabled="false" size="s" success="false" value="" max="" min="" label="Label Text" caption="Caption text, description, error notification." aria-label-text="Date Picker" required="false" autocomplete="on" type="date"></ifx-date-picker>

Dropdown

Menu Item

Controls

Toggle Placement

Toggle Size

Toggle Disabled

Toggle Variant

Toggle Target

Toggle Icon

Toggle Error

Toggle DefaultOpen

Toggle NoCloseOnOutsideClick

Toggle NoCloseOnMenuClick

Toggle NoAppendToBody

placement:

size:

disabled:

variant:

target:

href:

icon:

error:

defaultOpen:

noCloseOnOutsideClick:

noCloseOnMenuClick:

noAppendToBody:

View Code

<ifx-dropdown placement="bottom-start" default-open="false" no-close-on-outside-click="false" no-close-on-menu-click="false" no-append-to-body="false" disabled="false">
      <ifx-dropdown-trigger-button variant="primary">Dropdown</ifx-dropdown-trigger-button>
      <ifx-dropdown-menu size="m">
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
      </ifx-dropdown-menu>
    </ifx-dropdown>

Error Page

Go to homepage

Get support

Controls

Toggle Type

type:

illustrationUrl:

imgAlt:

headline:

description:

View Code

<ifx-error-page img-alt="" type="403" headline="" description="" illustration-url="">
      <div slot="button">
        <ifx-button variant="primary" full-width="true">Go to homepage</ifx-button>
      </div>
      <div slot="button">
        <ifx-button variant="secondary" full-width="true">Get support</ifx-button>
      </div>
    </ifx-error-page>

Footer - Medium

Terms

Imprint

Privacy policy

Glossary

Controls

Toggle Icon

copyrightText:

icon:

href:

ariaLabelOfLink:

View Code

<ifx-footer copyright-text="© 1999 - 2026 Infineon Technologies AG">
      <div slot="socials">
        <ifx-link variant="title" href="http://facebook.com/infineon" aria-label="Follow us on Facebook">
          <ifx-icon icon="facebook"></ifx-icon>
        </ifx-link>
        <ifx-link variant="title" href="http://youtube.com/infineon" aria-label="Follow us on Youtube">
          <ifx-icon icon="youtube"></ifx-icon>
        </ifx-link>
        <ifx-link variant="title" href="http://instagram.com/infineon" aria-label="Follow us on Instagram">
          <ifx-icon icon="instagram"></ifx-icon>
        </ifx-link>
        <ifx-link variant="title" href="http://linkedin.com/infineon" aria-label="Follow us on LinkedIn">
          <ifx-icon icon="linkedin"></ifx-icon>
        </ifx-link>
        <ifx-link variant="title" href="http://xing.com/infineon" aria-label="Follow us on Xing">
          <ifx-icon icon="xing"></ifx-icon>
        </ifx-link>
      </div>
      <div slot="info">
        <ifx-link variant="menu" href="https://yourwebsite.com/terms" target="_blank">Terms</ifx-link>
        <ifx-link variant="menu" href="https://yourwebsite.com/imprint" target="_blank">Imprint</ifx-link>
        <ifx-link variant="menu" href="https://yourwebsite.com/privacy-policy" target="_blank">Privacy policy</ifx-link>
        <ifx-link variant="menu" href="https://yourwebsite.com/glossary" target="_blank">Glossary</ifx-link>
      </div>
    </ifx-footer>

Icon Button

Controls

Toggle Icon

Toggle Variant

Toggle Disabled

Toggle Size

Toggle Target

Toggle Shape

icon:

variant:

disabled:

href:

size:

target:

shape:

ariaLabelText:

View Code

<ifx-icon-button shape="round" variant="primary" icon="c-info-16" href="" target="_blank" size="m" aria-label-text="Icon Button" disabled="false"></ifx-icon-button>

Indicator

Controls

Toggle Inverted

inverted:

View Code

<ifx-indicator variant="number" number="1" inverted="false"></ifx-indicator>

Link

Controls

Toggle Target

Toggle Disabled

Toggle Size

Toggle Variant

ariaLabel:

href:

target:

disabled:

download:

size:

variant:

View Code

<ifx-link href="" aria-label="Link" target="_blank" size="m" variant="bold" download="" disabled="false">Link</ifx-link>

Navigation/Navbar

Link Layer 3 Nested Item 1

Layer 3 Nested Item 2

Layer 3 Nested Item 3

Layer 3 Nested Item 4

Layer 2 Nested Item 3

Layer 2 Nested Item 4

Layer 2 Nested Item 5

Layer 2 Item 1

Layer 2 Item 2

Layer 2 Item 3

Nested Item 3

Nested Item 4

Menu Item

Item1

Item2

Controls

Toggle NavbarPositionFixed

Toggle ShowLogoAndAppname

Toggle LogoHrefTarget

Toggle ShowLabelOfNavbarItem

Toggle IconOfNavbarItem

Toggle DotIndicator

Toggle TargetOfnavbarItem

Toggle HideOnMobile

Toggle ShowNavbarProfileLabel

Toggle Target

Toggle SearchBarIsOpen

Toggle SearchBarPosition

applicationName:

navbarPositionFixed:

showLogoAndAppname:

logoHref:

logoHrefTarget:

showLabelOfNavbarItem:

iconOfNavbarItem:

numberIndicator:

dotIndicator:

hrefOfNavbarItem:

targetOfnavbarItem:

hideOnMobile:

showNavbarProfileLabel:

href:

profileImageUrl:

target:

alt:

userName:

searchBarIsOpen:

searchBarPosition:

View Code

<ifx-navbar show-logo-and-appname="true" application-name="Application name" fixed="false" logo-href="http://google.com" logo-href-target="_self">
      <ifx-navbar-item icon="" slot="left-item" target="_self" href="" hide-on-mobile="true">
        <ifx-navbar-item icon="">
          <ifx-navbar-item>
            <ifx-navbar-item href="http://google.com" target="_blank">Link Layer 3 Nested Item 1</ifx-navbar-item>
            <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>
            <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>
            <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>
          </ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Nested Item 3</ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>
        </ifx-navbar-item>
        <ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>
        </ifx-navbar-item>
        <ifx-navbar-item>Nested Item 3</ifx-navbar-item>
        <ifx-navbar-item>
          <ifx-navbar-item>Nested Item 4</ifx-navbar-item>
        </ifx-navbar-item>
      </ifx-navbar-item>
      <ifx-navbar-item href="" target="_self" slot="left-item" icon="" show-label="true">Menu Item</ifx-navbar-item>
      <ifx-navbar-item slot="left-item">
        <ifx-navbar-item>Item1</ifx-navbar-item>
        <ifx-navbar-item>Item2</ifx-navbar-item>
      </ifx-navbar-item>
      <ifx-search-bar slot="search-bar-left" is-open="false"></ifx-search-bar>
      <ifx-navbar-item number-indicator="" slot="right-item" target="_blank" href="http://google.com" hide-on-mobile="" show-label="false" icon="image-16"></ifx-navbar-item>
      <ifx-navbar-item dot-indicator="false" slot="right-item" hide-on-mobile="" show-label="false" icon="image-16"></ifx-navbar-item>
      <ifx-navbar-profile user-name="" slot="right-item" image-url="" show-label="true" href="" target="_self" alt="profile image"></ifx-navbar-profile>
    </ifx-navbar>

Navigation/Sidebar

Menu Items

Menu Item

Sub menu item

Menu Item

Items group

Item 1

Item 2

Controls

Toggle ShowHeader

Toggle ShowFooter

Toggle InitialCollapse

Toggle Collapsed

Toggle Collapsible

Toggle Position

Toggle Icon

Toggle TargetOfSidebarItem

Toggle ActiveSidebarItem

Toggle IsActionItem

Toggle LogoHrefTarget

Toggle FooterHrefTarget

applicationName:

showHeader:

showFooter:

initialCollapse:

collapsed:

collapsible:

position:

imprint:

termsOfUse:

privacyPolicy:

copyrightText:

icon:

hrefOfSidebarItem:

targetOfSidebarItem:

numberIndicatorOfSidebarItem:

activeSidebarItem:

isActionItem:

hideMenuLabel:

logoHref:

logoHrefTarget:

footerHrefTarget:

View Code

<ifx-sidebar application-name="Application Name" collapsible="false" collapsed="false" show-header="true" show-footer="true" initial-collapse="true" terms-of-use="https://yourwebsite.com/terms" imprint="https://yourwebsite.com/imprint" privacy-policy="https://yourwebsite.com/privacy-policy" copyright-text="© 1999 - 2026 Infineon Technologies AG" position="left" logo-href="http://google.com" logo-href-target="_self" footer-target="_blank" hide-menu-label="Hide Menu" footer-href-target="_blank">
      <ifx-sidebar-title>Menu Items</ifx-sidebar-title>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item icon="image-16">
          <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
          <ifx-sidebar-item active="true">Sub menu item</ifx-sidebar-item>
          <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
        </ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank">Menu Item</ifx-sidebar-item>
      </ifx-sidebar-item>
      <ifx-sidebar-title>Items group</ifx-sidebar-title>
      <ifx-sidebar-item href="https://google.com" target="_self" icon="image-16" number-indicator="" isactionitem="false" active="false">Item 1</ifx-sidebar-item>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Item 2</ifx-sidebar-item>
    </ifx-sidebar>

Notification

Sample Notification

Controls

Toggle Variant

Toggle Icon

Toggle LinkTarget

variant:

icon:

linkText:

linkHref:

linkTarget:

View Code

<ifx-notification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com" link-target="_blank">Sample Notification</ifx-notification>

Pagination

Controls

Toggle ShowItemsPerPage

currentPage:

total:

itemsPerPage:

showItemsPerPage:

itemsPerPageLabel:

View Code

<ifx-pagination total="50" current-page="1" show-items-per-page="" items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}, {"value":"all","selected":false}]' items-per-page-label="Result per Pages"></ifx-pagination>

Progress Bar

Controls

Toggle ShowLabel

Toggle Size

value:

showLabel:

size:

View Code

<ifx-progress-bar value="50" size="m" show-label="false"></ifx-progress-bar>

Radio Button

Text

Controls

Toggle Error

Toggle Disabled

Toggle Checked

Toggle Size

error:

disabled:

checked:

size:

name:

value:

View Code

<ifx-radio-button size="s" name="radio-button" value="radio" error="false" disabled="false" checked="false">Text</ifx-radio-button>

Radio Button Group

Option 0

Option 1

Option 2

Controls

Toggle Alignment

Toggle Size

Toggle Checked

Toggle Disabled

Toggle Error

Toggle ShowGroupLabel

Toggle ShowCaption

Toggle ShowCaptionIcon

Toggle Required

alignment:

size:

checked:

disabled:

error:

name:

showGroupLabel:

groupLabelText:

showCaption:

captionText:

showCaptionIcon:

required:

View Code

<ifx-radio-button-group alignment="vertical" group-label-text="Group Label" caption-text="Caption text, description, error notification" size="m" show-group-label="false" show-caption="false" show-caption-icon="false" required="false">
      <ifx-radio-button value="0" size="m">Option 0</ifx-radio-button>
      <ifx-radio-button value="1" size="m">Option 1</ifx-radio-button>
      <ifx-radio-button value="2" size="m">Option 2</ifx-radio-button>
    </ifx-radio-button-group>

Search Bar

Controls

Toggle IsOpen

Toggle Disabled

Toggle ShowCloseButton

isOpen:

disabled:

value:

autocomplete:

maxlength:

showCloseButton:

open:

close:

View Code

<ifx-search-bar is-open="true" disabled="false" value="" show-close-button="true" autocomplete="on"></ifx-search-bar>

Search Field

Controls

Toggle ShowDeleteIcon

Toggle Disabled

Toggle Size

Toggle ShowSuggestions

Toggle EnableHistory

showDeleteIcon:

disabled:

size:

placeholder:

maxlength:

value:

autocomplete:

showSuggestions:

enableHistory:

maxSuggestions:

maxHistoryItems:

historyKey:

historyHeaderText:

ariaLabelText:

ariaLabelledBy:

ariaDescribedBy:

ariaControls:

ariaExpanded:

deleteIconAriaLabel:

historyDeleteAriaLabel:

dropdownAriaLabel:

suggestionAriaLabel:

historyItemAriaLabel:

View Code

<ifx-search-field size="m" show-delete-icon="true" show-suggestions="false" enable-history="true" max-suggestions="10" max-history-items="5" history-key="ifx-search-history" history-header-text="Recent Searches" value="" autocomplete="on" placeholder="Search..." aria-label-text="Search field" delete-icon-aria-label="Clear search" history-delete-aria-label="Remove from history" dropdown-aria-label="Search suggestions and history" suggestion-aria-label="Search suggestion" history-item-aria-label="Search history item" disabled="false"></ifx-search-field>

Segmented Control

Controls

Toggle Size

Toggle Icon

Toggle Selected

Toggle Error

Toggle Required

caption:

label:

size:

icon:

selected:

value:

error:

required:

ifxChange:

View Code

<ifx-segmented-control caption="Caption text to describe the controls" label="Group Label" size="regular" error="false" required="false">
      <ifx-segment value="Value1" icon="star-16"></ifx-segment>
      <ifx-segment value="Value2" icon="star-16"></ifx-segment>
      <ifx-segment value="Value3" icon="star-16"></ifx-segment>
      <ifx-segment value="Value4" icon="star-16"></ifx-segment>
      <ifx-segment value="Value5" icon="star-16"></ifx-segment>
    </ifx-segmented-control>

Select/Single Select

Controls

Toggle Size

Toggle Placeholder

Toggle Error

Toggle Disabled

Toggle Required

Toggle ShowSearch

Toggle ShowClearButton

size:

placeholder:

placeholderValue:

error:

label:

disabled:

caption:

required:

showSearch:

showClearButton:

searchPlaceholderValue:

options:

clearSelection:

View Code

<ifx-select size="m" placeholder="true" show-clear-button="" show-search="" search-placeholder-value="Search..." required="" label="" caption="" placeholder-value="Placeholder" options='[{"value":"a","label":"option a","selected":false},{"value":"b","label":"option b","selected":false},{"value":"c","label":"option c","selected":false}]' error="false" disabled="false"></ifx-select>

Spinner

Controls

Toggle Size

Toggle Variant

Toggle Inverted

size:

variant:

inverted:

ariaLabelText:

View Code

<ifx-spinner aria-label-text="" variant="default" size="m" inverted="false"></ifx-spinner>

Status

Controls

Toggle Border

Toggle Color

label:

border:

color:

View Code

<ifx-status label="text" color="orange-500" border="true"></ifx-status>

Stepper

Step Label 1

Step Label 2

Step Label 3

Step Label 4

Step Label 5

Controls

Toggle CompleteStep

Toggle Disabled

Toggle Error

Toggle IndicatorPosition

Toggle ShowStepNumber

Toggle Variant

activeStep:

completeStep:

disabled:

error:

indicatorPosition:

showStepNumber:

variant:

ariaLabelText:

ariaCurrentText:

View Code

<ifx-stepper active-step="2" aria-label-text="" aria-current-text="" show-step-number="false" variant="default" indicator-position="left">
      <ifx-step>Step Label 1</ifx-step>
      <ifx-step>Step Label 2</ifx-step>
      <ifx-step>Step Label 3</ifx-step>
      <ifx-step>Step Label 4</ifx-step>
      <ifx-step>Step Label 5</ifx-step>
    </ifx-stepper>

Stepper - Compact

Step Label 1

Step Label 2

Step Label 3

Step Label 4

Step Label 5

Controls

Toggle CompleteStep

Toggle Disabled

Toggle Error

Toggle IndicatorPosition

Toggle ShowStepNumber

Toggle Variant

activeStep:

completeStep:

disabled:

error:

indicatorPosition:

showStepNumber:

variant:

ariaLabelText:

ariaCurrentText:

View Code

<ifx-stepper active-step="2" aria-label-text="" aria-current-text="" indicator-position="left" variant="compact" show-step-number="false">
      <ifx-step>Step Label 1</ifx-step>
      <ifx-step>Step Label 2</ifx-step>
      <ifx-step>Step Label 3</ifx-step>
      <ifx-step>Step Label 4</ifx-step>
      <ifx-step>Step Label 5</ifx-step>
    </ifx-stepper>

Switch

Controls

Toggle Checked

Toggle Disabled

name:

checked:

value:

disabled:

View Code

<ifx-switch name="switch" value="on" checked="false" disabled="false">Switch</ifx-switch>

Table (basic)

Controls

Toggle RowHeight

Toggle Variant

tableHeight:

rowHeight:

cols:

rows:

variant:

View Code

<ifx-basic-table cols='[{"headerName":"ID","field":"id","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Item","field":"item","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Date","field":"date"}]' rows='[{"id":1,"item":"Item 1","price":356,"date":"2025-05-11"},{"id":2,"item":"Item 2","price":55,"date":"2025-03-26"},{"id":3,"item":"Item 3","price":24},{"id":4,"item":"Item 4","price":874,"date":"2025-04-30"},{"id":5,"item":"Item 5","price":689,"date":"2025-09-14"},{"id":6,"item":"Item 6","price":46},{"id":7,"item":"Item 7","price":421,"date":"2026-07-25"},{"id":8,"item":"Item 8","price":17,"date":"2026-06-28"},{"id":9,"item":"Item 9","price":752},{"id":10,"item":"Item 10","price":73,"date":"2026-01-27"},{"id":11,"item":"Item 11","price":94,"date":"2026-10-31"},{"id":12,"item":"Item 12","price":846}]' table-height="auto" row-height="default" variant="default"></ifx-basic-table>

Table (advanced) - DefaultState

Controls

Toggle Pagination

Toggle ServerSidePagination

Toggle ShowLoading

Toggle RowHeight

Toggle EnableSelection

Toggle FilterOrientation

Toggle FitColumns

Toggle Variant

tableHeight:

pagination:

serverSidePagination:

paginationItemsPerPage:

showLoading:

rowHeight:

enableSelection:

filterOrientation:

cols:

fitColumns:

columnMinWidth:

columnWidth:

rows:

variant:

headline:

headlineNumber:

showMoreFilters:

View Code

<ifx-table row-height="default" cols='[{"headerName":"ID","field":"id","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Item","field":"item","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Date","field":"date"}]' rows='[{"id":"1","item":"Item 1","price":356,"date":"2025-06-25"},{"id":"2","item":"Item 2","price":55,"date":"2025-03-26"},{"id":"3","item":"Item 3","price":24},{"id":"4","item":"x","price":874},{"id":"5","item":"x","price":689},{"id":"6","item":"x","price":46},{"id":"7","item":"Item 7","price":421},{"id":"8","item":"Item 8","price":17},{"id":"9","item":"x","price":752},{"id":"10","item":"Item 10","price":73},{"id":"11","item":"x","price":94}]' table-height="auto" pagination-items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}, {"value":"all","selected":false}]' filter-orientation="none" variant="default" fit-column="false" column-min-width="200" column-width="100" headline="Matching results" headline-number="0" pagination="false" server-side-pagination="false" show-loading="false" enable-selection="false" fit-columns="false"></ifx-table>

Tabs

Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Content for Tab #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Content for Tab #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Controls

Toggle Orientation

Toggle Icon

Toggle FullWidth

Toggle IconPosition

Toggle Disabled

Toggle PositionSticky

orientation:

icon:

fullWidth:

iconPosition:

activeTabIndex:

header:

subline:

disabled:

label:

number:

positionSticky:

View Code

<ifx-tabs orientation="horizontal" active-tab-index="0" full-width="false" position-sticky="false" subline="" label="" number="0">
      <ifx-tab header="Tab 1" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
      <ifx-tab header="Tab 2" disabled="false" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
      <ifx-tab header="Tab 3" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
    </ifx-tabs>

Text Field

Controls

Toggle Error

Toggle Disabled

Toggle Size

Toggle Icon

Toggle Success

Toggle ReadOnly

Toggle Required

Toggle ShowDeleteIcon

Toggle Type

label:

error:

disabled:

size:

icon:

success:

placeholder:

readOnly:

caption:

required:

name:

showDeleteIcon:

maxlength:

value:

internalId:

autocomplete:

type:

ariaLabel:

View Code

<ifx-text-field error="false" size="m" icon="" success="false" placeholder="Placeholder" read-only="false" caption="Caption" label="Label" required="true" name="text-field" show-delete-icon="false" value="" autocomplete="on" type="text" internal-id="text-field" aria-label="text field for user input" disabled="false" maxlength=""></ifx-text-field>

Textarea

Controls

Toggle Disabled

Toggle Error

Toggle Required

Toggle ReadOnly

Toggle Resize

Toggle Wrap

Toggle FullWidth

caption:

cols:

disabled:

error:

label:

maxlength:

name:

placeholder:

required:

readOnly:

resize:

rows:

value:

wrap:

fullWidth:

ifxInput:

View Code

<ifx-textarea caption="Caption text, description, error notification" cols="43" error="false" label="Label Text" name="textarea" placeholder="Placeholder" required="true" read-only="false" resize="both" rows="5" value="" wrap="soft" full-width="false" disabled="false"></ifx-textarea>

Tooltip

I'm the tooltip reference element - Please hover me

Controls

Toggle Icon

Toggle Position

Toggle Variant

text:

icon:

position:

variant:

header:

ariaLabelText:

View Code

<ifx-tooltip text="Hi, I'm a tooltip" variant="compact" position="auto" icon="c-info-16" aria-label-text="Tooltip with important information" header="Tooltip headline">I'm the tooltip reference element - Please hover me</ifx-tooltip>

Modal (Manual Example)

View Code

<ifx-modal
  id="modal"
  caption="Modal Title"
  caption-aria-label="Additional information for caption"
  close-button-aria-label="Close modal"
  variant="default"
  close-on-overlay-click="false"
  show-close-button="true"
  size="s">
  <div slot="content">
    <span>Modal content</span>
  </div>
  <div slot="buttons">
    <ifx-button variant="secondary">Cancel</ifx-button>
    <ifx-button>OK</ifx-button>
  </div>
</ifx-modal>
<ifx-button id="open-modal">Open Modal</ifx-button>

<script>
  const modal = document.getElementById('modal');
  const openButton = document.getElementById('open-modal');
  
  openButton.addEventListener('click', () => {
    modal.opened = true;
  });
  
  modal.addEventListener('ifxOpen', (event) => {
    console.log('ifxOpen:', event.detail);
  });
  
  modal.addEventListener('ifxClose', (event) => {
    console.log('ifxClose:', event.detail);
  });
</script>

Form-Associated Components

{}

View Code

<form id="form-associated-demo" class="demo-form__layout">
  <ifx-text-field
    name="fullName"
    label="Full name"
    placeholder="Ada Lovelace"
    show-delete-icon="true"
  ></ifx-text-field>

  <ifx-textarea
    name="message"
    label="Message"
    placeholder="Write a longer message"
    full-width="true"
  ></ifx-textarea>

  <ifx-checkbox name="newsletter" value="yes">Subscribe to newsletter</ifx-checkbox>

  <ifx-switch name="termsAccepted" value="accepted">Accept terms</ifx-switch>

  <div class="demo-form__actions">
    <ifx-button type="submit" variant="primary">Submit</ifx-button>
    <ifx-button type="reset" variant="secondary">Reset</ifx-button>
  </div>
</form>