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
| # | Property | Components | Descriptions | Types |
|---|---|---|---|---|
| 1 | _label | abbr, 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, tabs, textarea, toolbar, tree, tree-item, tree-item-wc | Defines 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-align | abbr, 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, textarea | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" |
| 3 | _disabled | accordion, 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, textarea | Makes the element not focusable and ignore all events. | boolean |
| 4 | _level | accordion, alert, card, details, heading | Defines 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 | _open | accordion, details, drawer, tree-item, tree-item-wc | If 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 | _alert | alert, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Defines whether the screen-readers should read out the notification. | boolean |
| 7 | _has-closer | alert, card | Defines whether the element can be closed. | boolean |
| 8 | _type | alert, button, button-link, input-date, input-text, split-button | Defines 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 | _variant | alert, button, heading, input-checkbox, input-password, link-button, progress, quote, spin, split-button | Defines 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 | _src | avatar, image | Sets the image `src` attribute to the given string. | string |
| 11 | _color | badge | Defines the backgroundColor and foregroundColor. | string | { backgroundColor: string; foregroundColor: Stringified |
| 12 | _icons | badge, 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-button | Defines 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-button | badge, input-color, input-date, input-email, input-file, input-number, input-password, input-text | Allows to add a button with an arbitrary action within the element (_hide-label only). | string | { _label: string; } & { _tabIndex?: number; _value?: Stringified |
| 14 | _links | breadcrumb, nav, skip-nav | Defines 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-key | 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, select, single-select, textarea | Defines the elements access key. Defines which key combination can be used to trigger or focus the interactive element of the component. | string |
| 16 | _aria-controls | button, button-link, split-button | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string |
| 17 | _aria-description | button, button-link, link, link-button | Defines the value for the aria-description attribute. | string |
| 18 | _aria-expanded | button, button-link, split-button | Defines 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-selected | button, button-link, split-button | Defines 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-class | button, link-button, pagination, split-button | Defines the custom class attribute if _variant="custom" is set. | string |
| 21 | _id | button, 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, textarea | Defines the internal ID of the primary component element. | string |
| 22 | _name | button, 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, textarea | Defines the technical name of an input field. | string |
| 23 | _short-key | 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, select, single-select, textarea | Defines the elements short key. Adds a visual short key hint to the component. Defines the elements access key. | string |
| 24 | _tab-index | 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, select, single-select, split-button, textarea | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number |
| 25 | _value | button, 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, textarea | Defines 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 |
| 26 | _hide-error | combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Hides the error message but leaves it in the DOM for the input's aria-describedby. | boolean |
| 27 | _hint | combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Defines the hint text. | string |
| 28 | _msg | combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Defines the properties for a message rendered as Alert component. | string | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6; _on?: KoliBriAlertEventCallbacks; _type?: "default" | "info" | "success" | "warning" | "error"; _variant?: "card" | "msg"; _label?: string; _alert?: boolean; _hasCloser?: boolean; } & { _description: string; } |
| 29 | _placeholder | combobox, input-email, input-number, input-password, input-text, single-select, textarea | Defines the placeholder for input field. To be shown when there's no value. | string |
| 30 | _required | combobox, input-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, single-select, textarea | Makes the input element required. | boolean |
| 31 | _suggestions | combobox, input-color, input-date, input-email, input-number, input-range, input-text | Suggestions the user can choose from. Suggestions to provide for the input. | W3CInputValue[] | string |
| 32 | _touched | combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Shows if the input was touched by a user. | boolean |
| 33 | _align | drawer, tabs | Specifies the orientation of the drawer. Defines the position of the tab captions. | "bottom" | "left" | "right" | "top" |
| 34 | _modal | drawer | Indicates whether the drawer is a modal. | boolean |
| 35 | _required-text | form | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | boolean | string |
| 36 | _secondary-headline | heading | Defines the text of the secondary headline. | string |
| 37 | _loading | image | Defines the loading mode for the image. | "eager" | "lazy" |
| 38 | _sizes | image | Defines the image sizes for different screen resolutions, supporting _srcset. | string |
| 39 | _srcset | image | Setzt eine Liste von Quell-URLs mit Breiten der Bilder. | string |
| 40 | _checked | input-checkbox | Defines whether the checkbox is checked or not. Can be read and written. | boolean |
| 41 | _error | input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textarea | Defines the error message text. | string |
| 42 | _indeterminate | input-checkbox | Puts the checkbox in the indeterminate state, does not change the value of _checked. | boolean |
| 43 | _label-align | input-checkbox | Defines which alignment should be used for presentation. | "left" | "right" |
| 44 | _auto-complete | input-color, input-date, input-email, input-number, input-password, input-range, input-text | Defines whether the input can be auto-completed. | "off" | "on" |
| 45 | _max | input-date, input-number, input-range, pagination, progress | Defines 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 |
| 46 | _min | input-date, input-number, input-range | Defines 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 |
| 47 | _read-only | input-date, input-email, input-number, input-password, input-text, textarea | Makes the input element read only. | boolean |
| 48 | _step | input-date, input-number, input-range | Defines the step size for value changes. | number |
| 49 | _has-counter | input-email, input-password, input-text, textarea | Shows the character count on the lower border of the input. | boolean |
| 50 | _max-length | input-email, input-password, input-text, textarea | Defines the maximum number of input characters. | number |
| 51 | _multiple | input-email, input-file, select | Makes the input accept multiple inputs. | boolean |
| 52 | _pattern | input-email, input-password, input-text | Defines a validation pattern for the input field. | string |
| 53 | _accept | input-file | Defines which file formats are accepted. | string |
| 54 | _options | input-radio, select, single-select | Options the user can choose from. Options the user can choose from, also supporting Optgroup. | RadioOption (Option Option |
| 55 | _orientation | input-radio, nav | Defines whether the orientation of the component is horizontal or vertical. | "horizontal" | "vertical" |
| 56 | _aria-current-value | link, link-button | Defines the value for the aria-current attribute. | "date" | "false" | "location" | "page" | "step" | "time" | "true" |
| 57 | _download | link, link-button | Tells the browser that the link contains a file. Optionally sets the filename. | string |
| 58 | _href | link, link-button, quote, tree-item, tree-item-wc | Sets 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 |
| 59 | _target | link, link-button | Defines where to open the link. | string |
| 60 | _width | modal | Defines the width of the modal. (max-width: 100%) | string |
| 61 | _collapsible | nav | Defines if navigation nodes can be collapsed or not. Enabled by default. | boolean |
| 62 | _has-icons-when-expanded | nav | Shows icons next to the navigation item labels, even when the navigation is not collapsed. | boolean |
| 63 | _boundary-count | pagination | Defines the amount of pages to show next to the outer arrow buttons. | number |
| 64 | _has-buttons | pagination | Defines which navigation buttons to render (first, last, next, previous buttons). | boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; } |
| 65 | _page | pagination | Defines the current page. | number |
| 66 | _page-size | pagination | Defines the amount of entries to show per page. | number |
| 67 | _page-size-options | pagination | Defines the options for the page-size-select. | number[] | string |
| 68 | _sibling-count | pagination | Defines the amount of pages to show next to the current page. | number |
| 69 | _unit | progress | Defines the unit of the step values (not shown). | string |
| 70 | _quote | quote | Defines the text of the quote. | string |
| 71 | _rows | select, textarea | Defines 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 |
| 72 | _show | spin | Makes the element show up. | boolean |
| 73 | _allow-multi-sort | table, table-stateful | Defines whether to allow multi sort. | boolean |
| 74 | _data | table, table-stateful, table-stateless | Defines the primary table data. | KoliBriTableDataType[] | string |
| 75 | _data-foot | table, table-stateful, table-stateless | Defines the data for the table footer. | KoliBriTableDataType[] | string |
| 76 | _headers | table, table-stateful | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCellWithLogic[][]; vertical?: KoliBriTableHeaderCellWithLogic[][]; } |
| 77 | _min-width | table, table-stateful, table-stateless | Defines the table min-width. | string |
| 78 | _pagination | table, table-stateful | Defines whether to show the data distributed over multiple pages. | boolean | string | { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks; _page?: number; _max?: number; _boundaryCount?: number; _hasButtons?: boolean | Stringified |
| 79 | _pagination-position | table, table-stateful | Controls the position of the pagination. | "both" | "bottom" | "top" |
| 80 | _selection | table, table-stateful, table-stateless | Defines how rows can be selected and the current selection. | string | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string; multiple?: boolean; selectedKeys?: string[]; }) |
| 81 | _header-cells | table-stateless | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; } |
| 82 | _behavior | tabs | Defines which behavior is active. | "select-automatic" | "select-manual" |
| 83 | _selected | tabs | Defines which tab is active. | number |
| 84 | _tabs | tabs | Defines the tab captions. | TabButtonProps[] | string |
| 85 | _adjust-height | textarea | Adjusts the height of the element to its content. | boolean |
| 86 | _resize | textarea | Defines 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" |
| 87 | _active | tree-item, tree-item-wc | If set (to true) the tree item is the active one. | boolean |
| 88 | _hide-button | kol-pagination | Versteckt 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 Property | Deprecated 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 Component | Deprecated 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.