Skip to main content

Properties

The aim is to use uniform properties across all components to make it easier to learn. The following requirements are defined for this:

  • Only one property name for similar properties
  • If possible, uniform descriptions for the same property names
  • If possible, uniform types with the same property names
  • Minimize the number of different properties, descriptions and types

Current status

#PropertyComponentsDescriptionsTypes
1_labelabbr, accordion, alert, avatar, badge, breadcrumb, button, button-link, card, details, heading, icon, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, modal, nav, pagination, progress, quote, select, skip-nav, split-button, table, tabs, textarea, tree, tree-item, tree-item-wc, tree-wcDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
Defines the label of the tree.
Defines the label of the link.
string
2_tooltip-alignabbr, button, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, pagination, select, split-button, textareaDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top"
3_disabledaccordion, button, button-link, details, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, split-button, textareaMakes the element not focusable and ignore all events.boolean
4_levelaccordion, alert, card, headingDefines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.0 | 1 | 2 | 3 | 4 | 5 | 6
5_openaccordion, details, tree-item, tree-item-wcIf set (to true) opens/expands the element, closes if not set (or set to false).boolean
6_alertalert, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaDefines whether the screen-readers should read out the notification.boolean
7_has-closeralert, cardDefines whether the element can be closed.boolean
8_typealert, button, button-link, input-date, input-text, split-buttonDefines either the type of the component or of the components interactive element."default" | "error" | "info" | "success" | "warning"
"button" | "reset" | "submit"
"date" | "datetime-local" | "month" | "time" | "week"
"search" | "tel" | "text" | "url"
9_variantalert, button, heading, input-checkbox, link-button, progress, quote, spin, split-buttonDefines which variant should be used for presentation."card" | "msg"
"custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary"
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "strong"
"button" | "default" | "switch"
"bar" | "cycle" | "cycle-label-value" | "cycle-value-label"
"block" | "inline"
"cycle" | "dot" | "none"
10_srcavatar, imageSets the image `src` attribute to the given string.string
11_colorbadgeDefines the backgroundColor and foregroundColor.string | { backgroundColor: string; foregroundColor: Stringified; }
12_iconsbadge, button, button-link, icon, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, select, split-buttonDefines the icon classnames (e.g. `_icons="fa-solid fa-user"`).KoliBriHorizontalIcons & KoliBriVerticalIcons | string
string
string | { checked: string; indeterminate?: string; unchecked?: string; } | { checked?: string; indeterminate: string; unchecked?: string; } | { checked?: string; indeterminate?: string; unchecked: string; }
string | { right?: IconOrIconClass; left?: IconOrIconClass; }
13_smart-buttonbadge, input-color, input-date, input-email, input-file, input-number, input-password, input-textAllows to add a button with an arbitrary action within the element (_hide-label only).string | { _label: string; } & { _tabIndex?: number; _value?: Stringified; _role?: AlternativeButtonLinkRolePropType; _ariaControls?: string; _ariaExpanded?: boolean; _ariaSelected?: boolean; _on?: ButtonCallbacksPropType; _type?: "button" | "reset" | "submit"; _variant?: "primary" | "secondary" | "normal" | "tertiary" | "danger" | "ghost" | "custom"; _customClass?: string; _disabled?: boolean; _hideLabel?: boolean; _icons?: IconsPropType; _id?: string; _name?: string; _syncValueBySelector?: string; _tooltipAlign?: AlignPropType; _accessKey?: string; }
14_linksbreadcrumb, nav, skip-navDefines the list of links combined with their labels to render.
Defines the list of links, buttons or texts to render.
BreadcrumbLinkProps[] | string
ButtonOrLinkOrTextWithChildrenProps[] | string
LinkProps[] | string
15_access-keybutton, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, textareaDefines the elements access key.
Defines which key combination can be used to trigger or focus the interactive element of the component.
string
16_aria-controlsbutton, button-link, split-buttonDefines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)string
17_aria-expandedbutton, button-link, split-buttonDefines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)boolean
18_aria-selectedbutton, button-link, split-buttonDefines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)boolean
19_custom-classbutton, link-button, pagination, split-buttonDefines the custom class attribute if _variant="custom" is set.string
20_idbutton, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, split-button, textareaDefines the internal ID of the primary component element.string
21_namebutton, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, split-button, textareaDefines the technical name of an input field.string
22_tab-indexbutton, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, split-button, textareaDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number
23_valuebutton, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, progress, select, split-button, textareaDefines the value that the button emits on click.
Defines the value of the input.
Defines the progress.
boolean | null | number | object | string
string
Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null
`${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null | number
number | string
number
W3CInputValue[] | string
24_required-textformDefines whether the mandatory-fields-hint should be shown. A string overrides the default text.boolean | string
25_secondary-headlineheadingDefines the text of the secondary headline.string
26_loadingimageDefines the loading mode for the image."eager" | "lazy"
27_sizesimageDefines the image sizes for different screen resolutions, supporting _srcset.string
28_srcsetimageSetzt eine Liste von Quell-URLs mit Breiten der Bilder.string
29_checkedinput-checkboxDefines whether the checkbox is checked or not. Can be read and written.boolean
30_errorinput-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaDefines the error message text.string
31_hide-errorinput-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaHides the error message but leaves it in the DOM for the input's aria-describedby.boolean
32_hintinput-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaDefines the hint text.string
33_indeterminateinput-checkboxPuts the checkbox in the indeterminate state, does not change the value of _checked.boolean
34_requiredinput-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, textareaMakes the input element required.boolean
35_touchedinput-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaShows if the input was touched by a user.boolean
36_auto-completeinput-color, input-date, input-email, input-number, input-password, input-range, input-textDefines whether the input can be auto-completed."off" | "on"
37_suggestionsinput-color, input-date, input-email, input-number, input-range, input-textSuggestions to provide for the input.W3CInputValue[] | string
38_maxinput-date, input-number, input-range, pagination, progressDefines the largest possible input value.
Defines the maximum number of pages.
Defines at which value the progress display is completed.
Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}`
`${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | number
number
39_mininput-date, input-number, input-rangeDefines the smallest possible input value.Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}`
`${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | number
number
40_read-onlyinput-date, input-email, input-number, input-password, input-text, textareaMakes the input element read only.boolean
41_stepinput-date, input-number, input-rangeDefines the step size for value changes.number
42_has-counterinput-email, input-password, input-text, textareaShows the character count on the lower border of the input.boolean
43_max-lengthinput-email, input-password, input-text, textareaDefines the maximum number of input characters.number
44_multipleinput-email, input-file, selectMakes the input accept multiple inputs.boolean
45_patterninput-email, input-password, input-textDefines a validation pattern for the input field.string
46_placeholderinput-email, input-number, input-password, input-text, textareaDefines the placeholder for input field. To be shown when there's no value.string
47_acceptinput-fileDefines which file formats are accepted.string
48_optionsinput-radio, selectOptions the user can choose from.
Options the user can choose from, also supporting Optgroup.
Option[] | string
(Option | Optgroup)[] | string
49_orientationinput-radio, navDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical"
50_aria-current-valuelink, link-buttonDefines the value for the aria-current attribute."date" | "false" | "location" | "page" | "step" | "time" | "true"
51_downloadlink, link-buttonTells the browser that the link contains a file. Optionally sets the filename.string
52_hreflink, link-button, quote, tree-item, tree-item-wcSets the target URI of the link or citation source.
Defines the target URI of the link.
This property is used for a link from a reference to the target URL.
string
53_targetlink, link-buttonDefines where to open the link.string
54_widthmodalDefines the width of the modal. (max-width: 100%)string
55_collapsiblenavDefines if navigation nodes can be collapsed or not. Enabled by default.boolean
56_has-icons-when-expandednavShows icons next to the navigation item labels, even when the navigation is not collapsed.boolean
57_boundary-countpaginationDefines the amount of pages to show next to the outer arrow buttons.number
58_has-buttonspaginationDefines which navigation buttons to render (first, last, next, previous buttons).boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; }
59_pagepaginationDefines the current page.number
60_page-sizepaginationDefines the amount of entries to show per page.number
61_page-size-optionspaginationDefines the options for the page-size-select.number[] | string
62_sibling-countpaginationDefines the amount of pages to show next to the current page.number
63_alignpopover-wc, tabsDefines the alignment of the tooltip, popover or tabs in relation to the element.
Defines the position of the tab captions.
"bottom" | "left" | "right" | "top"
64_showpopover-wc, spinMakes the element show up.boolean
65_unitprogressDefines the unit of the step values (not shown).string
66_quotequoteDefines the text of the quote.string
67_rowsselect, textareaDefines how many rows of options should be visible at the same time.
Defines how many rows of text should be visible at the same time.
number
68_allow-multi-sorttableDefines whether to allow multi sort.boolean
69_datatableDefines the primary table data.KoliBriTableDataType[] | string
70_data-foottableDefines the data for the table footer.KoliBriTableDataType[] | string
71_headerstableDefines the horizontal and vertical table headers.string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; }
72_min-widthtableDefines the table min-width.string
73_paginationtableDefines whether to show the data distributed over multiple pages.boolean | string | { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks; _page?: number; _max?: number; _boundaryCount?: number; _hasButtons?: boolean | Stringified; _pageSize?: number; _pageSizeOptions?: Stringified; _siblingCount?: number; _customClass?: string; _label?: string; _tooltipAlign?: AlignPropType; }
74_pagination-positiontableControls the position of the pagination."both" | "bottom" | "top"
75_selectedtabsDefines which tab is active.number
76_tabstabsDefines the tab captions.TabButtonProps[] | string
77_adjust-heighttextareaAdjusts the height of the element to its content.boolean
78_resizetextareaDefines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)"both" | "horizontal" | "none" | "vertical"
79_activetree-item, tree-item-wcIf set (to true) the tree item is the active one.boolean
80_hide-buttonkol-paginationVersteckt entweder den Zurück- oder Weiter-Schalter, oder beide Schalter."previous" | "next" | "both"

Deprecated Properties

The traits listed in the table below replace numerous deprecated traits (13 von 99, ~13%).

New PropertyDeprecated Properties
_align_tabs-align
_dataFoot
_hide-button_has-buttons (?)
_hide-label_compact, _hide-label
_label_alt, _aria-label, _caption, _heading, _headline, _summary, _symbol, _title
_max_total
_row_size
_variant_type*
_show_show-dropdown
_has-footer, _height, _icon-align, _list, _part, _role, _show-duration, _stealth, _selector, _useCase

* Betrifft nur Typen, die eigentlich Varianten meinen.

Obsolete components

The components listed in the following table will be superseded or removed.

New ComponentDeprecated Components
avatar
toolbar
tree
list
button-group, icon-font-awesome, icon-icofont, input-radio-group, link-group, symbol

* Betrifft nur Typen, die eigentlich Varianten meinen.