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, combobox, details, drawer, 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, single-select, skip-nav, split-button, table, table-stateful, table-stateless, table-stateless-wc, tabs, textarea, toolbar, 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 semantic aria-label of the component.
Defines the label of the tree.
Defines the label of the link.
string
2_tooltip-alignabbr, button, button-link, combobox, 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, single-select, split-button, textareaDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top"
3_disabledaccordion, button, button-link, combobox, 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, single-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, drawer, tree-item, tree-item-wcIf set (to true) opens/expands the element, closes if not set (or set to false).
Specifies the default open state of the drawer.
boolean
6_alertalert, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-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, input-password, 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"
"default" | "visibility-toggle"
"bar" | "cycle"
"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, combobox, icon, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, select, single-select, split-buttonDefines the icon classnames (e.g. `_icons="fa-solid fa-user"`).KoliBriHorizontalIcons & KoliBriVerticalIcons | string
string | { right?: IconOrIconClass; left?: IconOrIconClass; }
string
string | { checked: string; indeterminate?: string; unchecked?: string; } | { checked?: string; indeterminate: string; unchecked?: string; } | { checked?: string; indeterminate?: string; unchecked: string; }
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; _ariaExpanded?: boolean; _role?: "button" | "link" | "tab" | "treeitem"; _ariaControls?: string; _ariaDescription?: string; _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, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, single-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-descriptionbutton, button-link, link, link-buttonDefines the value for the aria-description attribute.string
18_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
19_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
20_custom-classbutton, link-button, pagination, split-buttonDefines the custom class attribute if _variant="custom" is set.string
21_idbutton, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, split-button, textareaDefines the internal ID of the primary component element.string
22_namebutton, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, split-button, textareaDefines the technical name of an input field.string
23_tab-indexbutton, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, single-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
24_valuebutton, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, progress, select, single-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
W3CInputValue[] | string
25_hide-errorcombobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textareaHides the error message but leaves it in the DOM for the input's aria-describedby.boolean
26_hintcombobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textareaDefines the hint text.string
27_placeholdercombobox, input-email, input-number, input-password, input-text, single-select, textareaDefines the placeholder for input field. To be shown when there's no value.string
28_requiredcombobox, input-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, single-select, textareaMakes the input element required.boolean
29_suggestionscombobox, input-color, input-date, input-email, input-number, input-range, input-textSuggestions the user can choose from.
Suggestions to provide for the input.
W3CInputValue[] | string
30_touchedcombobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textareaShows if the input was touched by a user.boolean
31_aligndrawer, popover-wc, tabsSpecifies the orientation of the drawer.
Defines the alignment of the tooltip, popover or tabs in relation to the element.
Defines the position of the tab captions.
"bottom" | "left" | "right" | "top"
32_modaldrawerIndicates whether the drawer is a modal.boolean
33_required-textformDefines whether the mandatory-fields-hint should be shown. A string overrides the default text.boolean | string
34_secondary-headlineheadingDefines the text of the secondary headline.string
35_loadingimageDefines the loading mode for the image."eager" | "lazy"
36_sizesimageDefines the image sizes for different screen resolutions, supporting _srcset.string
37_srcsetimageSetzt eine Liste von Quell-URLs mit Breiten der Bilder.string
38_checkedinput-checkboxDefines whether the checkbox is checked or not. Can be read and written.boolean
39_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
40_indeterminateinput-checkboxPuts the checkbox in the indeterminate state, does not change the value of _checked.boolean
41_label-aligninput-checkboxDefines which alignment should be used for presentation."left" | "right"
42_auto-completeinput-color, input-date, input-email, input-number, input-password, input-range, input-textDefines whether the input can be auto-completed."off" | "on"
43_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
44_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
45_read-onlyinput-date, input-email, input-number, input-password, input-text, textareaMakes the input element read only.boolean
46_stepinput-date, input-number, input-rangeDefines the step size for value changes.number
47_has-counterinput-email, input-password, input-text, textareaShows the character count on the lower border of the input.boolean
48_max-lengthinput-email, input-password, input-text, textareaDefines the maximum number of input characters.number
49_multipleinput-email, input-file, selectMakes the input accept multiple inputs.boolean
50_patterninput-email, input-password, input-textDefines a validation pattern for the input field.string
51_acceptinput-fileDefines which file formats are accepted.string
52_optionsinput-radio, select, single-selectOptions the user can choose from.
Options the user can choose from, also supporting Optgroup.
RadioOption[] | string
(Option | Optgroup)[] | string
Option[] | string
53_orientationinput-radio, navDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical"
54_aria-current-valuelink, link-buttonDefines the value for the aria-current attribute."date" | "false" | "location" | "page" | "step" | "time" | "true"
55_downloadlink, link-buttonTells the browser that the link contains a file. Optionally sets the filename.string
56_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
57_targetlink, link-buttonDefines where to open the link.string
58_widthmodalDefines the width of the modal. (max-width: 100%)string
59_collapsiblenavDefines if navigation nodes can be collapsed or not. Enabled by default.boolean
60_has-icons-when-expandednavShows icons next to the navigation item labels, even when the navigation is not collapsed.boolean
61_boundary-countpaginationDefines the amount of pages to show next to the outer arrow buttons.number
62_has-buttonspaginationDefines which navigation buttons to render (first, last, next, previous buttons).boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; }
63_pagepaginationDefines the current page.number
64_page-sizepaginationDefines the amount of entries to show per page.number
65_page-size-optionspaginationDefines the options for the page-size-select.number[] | string
66_sibling-countpaginationDefines the amount of pages to show next to the current page.number
67_showpopover-wc, spinMakes the element show up.boolean
68_unitprogressDefines the unit of the step values (not shown).string
69_quotequoteDefines the text of the quote.string
70_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
71_allow-multi-sorttable, table-statefulDefines whether to allow multi sort.boolean
72_datatable, table-stateful, table-stateless, table-stateless-wcDefines the primary table data.KoliBriTableDataType[] | string
73_data-foottable, table-stateful, table-stateless, table-stateless-wcDefines the data for the table footer.KoliBriTableDataType[] | string
74_headerstable, table-statefulDefines the horizontal and vertical table headers.string | { horizontal?: KoliBriTableHeaderCellWithLogic[][]; vertical?: KoliBriTableHeaderCellWithLogic[][]; }
75_min-widthtable, table-stateful, table-stateless, table-stateless-wcDefines the table min-width.string
76_paginationtable, table-statefulDefines 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; }
77_pagination-positiontable, table-statefulControls the position of the pagination."both" | "bottom" | "top"
78_selectiontable, table-stateful, table-stateless, table-stateless-wcDefines how rows can be selected and the current selection.string | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string; multiple?: boolean; selectedKeys?: string[]; })
79_header-cellstable-stateless, table-stateless-wcDefines the horizontal and vertical table headers.string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; }
80_behaviortabsDefines which behavior is active."select-automatic" | "select-manual"
81_selectedtabsDefines which tab is active.number
82_tabstabsDefines the tab captions.TabButtonProps[] | string
83_adjust-heighttextareaAdjusts the height of the element to its content.boolean
84_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) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`."both" | "horizontal" | "none" | "vertical"
85_activetree-item, tree-item-wcIf set (to true) the tree item is the active one.boolean
86_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

* Only applies to types who actually mean variants.

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

* Only applies to types who actually mean variants.