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, table-stateless-wc, tabs, textarea, toolbar, tree, tree-item, tree-item-wc, tree-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, 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 | _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 |
24 | _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 |
25 | _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 |
26 | _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 |
27 | _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 |
28 | _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 |
29 | _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 |
30 | _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 |
31 | _align | drawer, popover-wc, tabs | Specifies 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 | _modal | drawer | Indicates whether the drawer is a modal. | boolean |
33 | _required-text | form | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | boolean | string |
34 | _secondary-headline | heading | Defines the text of the secondary headline. | string |
35 | _loading | image | Defines the loading mode for the image. | "eager" | "lazy" |
36 | _sizes | image | Defines the image sizes for different screen resolutions, supporting _srcset. | string |
37 | _srcset | image | Setzt eine Liste von Quell-URLs mit Breiten der Bilder. | string |
38 | _checked | input-checkbox | Defines whether the checkbox is checked or not. Can be read and written. | boolean |
39 | _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 |
40 | _indeterminate | input-checkbox | Puts the checkbox in the indeterminate state, does not change the value of _checked. | boolean |
41 | _label-align | input-checkbox | Defines which alignment should be used for presentation. | "left" | "right" |
42 | _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" |
43 | _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 |
44 | _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 |
45 | _read-only | input-date, input-email, input-number, input-password, input-text, textarea | Makes the input element read only. | boolean |
46 | _step | input-date, input-number, input-range | Defines the step size for value changes. | number |
47 | _has-counter | input-email, input-password, input-text, textarea | Shows the character count on the lower border of the input. | boolean |
48 | _max-length | input-email, input-password, input-text, textarea | Defines the maximum number of input characters. | number |
49 | _multiple | input-email, input-file, select | Makes the input accept multiple inputs. | boolean |
50 | _pattern | input-email, input-password, input-text | Defines a validation pattern for the input field. | string |
51 | _accept | input-file | Defines which file formats are accepted. | string |
52 | _options | input-radio, select, single-select | Options the user can choose from. Options the user can choose from, also supporting Optgroup. | RadioOption (Option Option |
53 | _orientation | input-radio, nav | Defines whether the orientation of the component is horizontal or vertical. | "horizontal" | "vertical" |
54 | _aria-current-value | link, link-button | Defines the value for the aria-current attribute. | "date" | "false" | "location" | "page" | "step" | "time" | "true" |
55 | _download | link, link-button | Tells the browser that the link contains a file. Optionally sets the filename. | string |
56 | _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 |
57 | _target | link, link-button | Defines where to open the link. | string |
58 | _width | modal | Defines the width of the modal. (max-width: 100%) | string |
59 | _collapsible | nav | Defines if navigation nodes can be collapsed or not. Enabled by default. | boolean |
60 | _has-icons-when-expanded | nav | Shows icons next to the navigation item labels, even when the navigation is not collapsed. | boolean |
61 | _boundary-count | pagination | Defines the amount of pages to show next to the outer arrow buttons. | number |
62 | _has-buttons | pagination | Defines which navigation buttons to render (first, last, next, previous buttons). | boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; } |
63 | _page | pagination | Defines the current page. | number |
64 | _page-size | pagination | Defines the amount of entries to show per page. | number |
65 | _page-size-options | pagination | Defines the options for the page-size-select. | number[] | string |
66 | _sibling-count | pagination | Defines the amount of pages to show next to the current page. | number |
67 | _show | popover-wc, spin | Makes the element show up. | boolean |
68 | _unit | progress | Defines the unit of the step values (not shown). | string |
69 | _quote | quote | Defines the text of the quote. | string |
70 | _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 |
71 | _allow-multi-sort | table, table-stateful | Defines whether to allow multi sort. | boolean |
72 | _data | table, table-stateful, table-stateless, table-stateless-wc | Defines the primary table data. | KoliBriTableDataType[] | string |
73 | _data-foot | table, table-stateful, table-stateless, table-stateless-wc | Defines the data for the table footer. | KoliBriTableDataType[] | string |
74 | _headers | table, table-stateful | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCellWithLogic[][]; vertical?: KoliBriTableHeaderCellWithLogic[][]; } |
75 | _min-width | table, table-stateful, table-stateless, table-stateless-wc | Defines the table min-width. | string |
76 | _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 |
77 | _pagination-position | table, table-stateful | Controls the position of the pagination. | "both" | "bottom" | "top" |
78 | _selection | table, table-stateful, table-stateless, table-stateless-wc | Defines how rows can be selected and the current selection. | string | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string; multiple?: boolean; selectedKeys?: string[]; }) |
79 | _header-cells | table-stateless, table-stateless-wc | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; } |
80 | _behavior | tabs | Defines which behavior is active. | "select-automatic" | "select-manual" |
81 | _selected | tabs | Defines which tab is active. | number |
82 | _tabs | tabs | Defines the tab captions. | TabButtonProps[] | string |
83 | _adjust-height | textarea | Adjusts the height of the element to its content. | boolean |
84 | _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" |
85 | _active | tree-item, tree-item-wc | If set (to true) the tree item is the active one. | boolean |
86 | _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.