Select All





Accordion Menu



Search icon
Default Card (white background)
Custom Card (lightcyan background)
Custom Card (Bordered)


calendar single value is: {{ calendar.singleValue }}


calendar range value is: {{ calendar.rangeValue }}


calendar month value is: {{ monthCalendar.monthValue }}




Value of dropdown is: {{ dropdown.value }}
Value of dropdown is: {{ largeDropdown.value }}



Value of dropdown is: {{ searchableDropdown.value }}

Category Dropdown

Value of dropdown is: {{ dropdownError.value }}

Value of searchable select is: {{ searchable.value }}

Value of searchable select is: {{ searchable.value }}

Value of searchable select is: {{ searchableError.value }}

Value of searchable select is: {{ lazyLoadedSearchable.value }}

Form:

form value is: {{ form.stringify() }} form status: {{ form.formGroup.status }}
Grid Col 1
Grid Col 2

Value of input is: {{ input.value }}


Value of input is: {{ inputError.value }}
multi-select value is: {{ multiSelect.selectedItems }}
multi-select value is: {{ multiSelectError.selectedItems }}
{{ item.label }}

Green Status Pill Purple Status Pill Blue Status Pill Red Status Pill

Data Exception Message


Quick jump with navigation

{{ item.value }}

Paginated Table

{{ item.label }} {{ item.value }}

Paginated Table With Filters

{{ item.label }} {{ item.value }} {{ item.date }}

Paginated Table With Filters and search Only

{{ item.label }} {{ item.name }} {{ item.value }} {{ item.date }}

Non-Paginated Table With Filters

{{ item.label }} {{ item.value }} {{ item.checkbox }}

Non-Paginated Table With Filters and no Cross icon, open & collapse using same button

{{ item.label }} {{ item.value }} {{ item.checkbox }}

Multiple column prefilter Filter Table

{{ item.label }} {{ item.value }} {{ item.checkbox }} {{ item.date }}

Editable Filter Table

{{ item.label }} {{ item.value }} {{ item.checkbox }} {{ item.date }}

Non-Paginated Table

{{ item.label }} {{ item.value }}
Toggle Switch value is: {{ toggleSwitch.value }}

Toast Generating Popover

Value Changing Popover

Value is {{ popover.valueChange.value }}

Embedded Popover in Inputs





Tab 1 content Tab 2 content Tab 3 content

Stacked Bar Graph


Split dropdown

Filter Table update

{{ item.label }} {{ item.value }} {{ item.status }} {{ item.date }}

Test

test multiselect