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, dialog, 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, meter, modal, nav, pagination, popover-button, progress, quote, select, single-select, skip-nav, spin, split-button, table-stateful, table-stateless, tabs, textarea, toolbar, tree, tree-item | 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. | string |
| 2 | _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, popover-button, select, single-select, split-button, textarea | Makes the element not focusable and ignore all events. | boolean |
| 3 | _level | accordion, alert, card, details, dialog, drawer, 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 |
| 4 | _open | accordion, details, drawer, tree-item | Opens/expands the element when truthy, closes/collapses when falsy. | boolean |
| 5 | _alert | alert | Defines whether the screen-readers should read out the notification. | boolean |
| 6 | _has-closer | alert, card, drawer | Defines whether the element can be closed. | boolean |
| 7 | _type | alert, button, button-link, input-date, input-text, popover-button, 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" |
| 8 | _variant | alert, button, button-link, combobox, dialog, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, modal, popover-button, progress, quote, select, single-select, spin, split-button, table-stateful, table-stateless, textarea | Defines which variant should be used for presentation. Defines the variant of the modal. | "card" | "msg" "custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary" string "blank" | "card" "button" | "default" | "switch" "bar" | "cycle" "block" | "inline" "cycle" | "dot" | "none" |
| 9 | _color | avatar, badge | Defines the backgroundColor and foregroundColor. | string | { backgroundColor: string; foregroundColor: string; } |
| 10 | _src | avatar, image | Sets the image `src` attribute to the given string. | string |
| 11 | _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, popover-button, select, single-select, split-button, textarea | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). 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; } |
| 12 | _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; } & { _type?: "button" | "reset" | "submit"; _accessKey?: string; _on?: ButtonCallbacksPropType<StencilUnknown>; _ariaExpanded?: boolean; _tabIndex?: number; _value?: StencilUnknown; _role?: "tab" | "treeitem"; _ariaControls?: string; _ariaDescription?: string; _ariaSelected?: boolean; _customClass?: string; _disabled?: boolean; _hideLabel?: boolean; _icons?: IconsPropType; _id?: string; _inline?: boolean; _name?: string; _shortKey?: string; _syncValueBySelector?: string; _tooltipAlign?: AlignPropType; _variant?: string; } |
| 13 | _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 |
| 14 | _access-key | button, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, popover-button, select, single-select, split-button, textarea | Defines the key combination that can be used to trigger or focus the component's interactive element. | string |
| 15 | _aria-controls | button, button-link, link, link-button, split-button | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string |
| 16 | _aria-description | button, button-link, link, link-button, popover-button, split-button | Defines the value for the aria-description attribute. | string |
| 17 | _aria-expanded | button, button-link, 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 |
| 18 | _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 |
| 19 | _custom-class | button, link-button, pagination, popover-button, split-button | Defines the custom class attribute if _variant="custom" is set. | string |
| 20 | _inline | button, button-link, link, popover-button | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | boolean |
| 21 | _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, popover-button, select, single-select, skeleton, split-button, textarea | Defines the technical name of an input field. Sets the name of the skeleton component. | string |
| 22 | _short-key | button, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, popover-button, select, single-select, split-button, textarea | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | string |
| 23 | _tooltip-align | 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, popover-button, select, single-select, split-button, textarea | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" |
| 24 | _value | button, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-number, input-password, input-radio, input-range, input-text, meter, popover-button, progress, select, single-select, split-button, textarea | Defines the value of the element. Defines the value of the element. Is capped between min and max. | 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}` | null | number `${number}.${number}` | `${number}` | number number StencilUnknown[] | boolean | null | number | object | string |
| 25 | _has-clear-button | combobox, single-select | Shows the clear button if enabled. | boolean |
| 26 | _hide-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 | 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. | Omit<AlertProps, "_on" | "_label" | "_level" | "_variant" | "_hasCloser"> & { _description: string; } | 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 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 | _width | dialog, modal | Defines the width of the modal. (max-width: 100%) | string |
| 34 | _align | drawer, tabs | Defines the visual orientation of the component. | "bottom" | "left" | "right" | "top" |
| 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 | Sets a list of source URLs with widths of the images. | string |
| 40 | _checked | input-checkbox | Defines whether the checkbox is checked or not. Can be read and written. | boolean |
| 41 | _indeterminate | input-checkbox | Puts the checkbox in the indeterminate state, does not change the value of _checked. | boolean |
| 42 | _label-align | input-checkbox | Defines which alignment should be used for presentation. | "left" | "right" |
| 43 | _auto-complete | input-color, input-date, input-email, input-number, input-password, input-range, input-text | Defines whether the input can be auto-completed. | string |
| 44 | _max | input-date, input-number, input-range, meter, pagination, progress | Defines the maximum value of the element. Defines the maximum value of the element. Default like native component. | 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}` | number number |
| 45 | _min | input-date, input-number, input-range, meter | Defines the smallest possible input value. Defines the minimum value of the element. Default like native component. | 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}` | number number |
| 46 | _read-only | input-date, input-email, input-number, input-password, input-text, textarea | Makes the input element read only. | boolean |
| 47 | _step | input-date, input-number, input-range | Defines the step size for value changes. | `${number}.${number}` | `${number}` | number |
| 48 | _has-counter | input-email, input-password, input-text, textarea | Shows a character counter for the input element. | boolean |
| 49 | _max-length | input-email, input-password, input-text, textarea | Defines the maximum number of input characters. | number |
| 50 | _max-length-behavior | input-email, input-password, input-text, textarea | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | "hard" | "soft" |
| 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 | _visibility-toggle | input-password | Activates the show password button | boolean |
| 55 | _options | input-radio, select, single-select | Options the user can choose from. | RadioOption<StencilUnknown>[] | string (Option<StencilUnknown> | Optgroup<StencilUnknown>)[] | string Option<StencilUnknown>[] | string |
| 56 | _orientation | input-radio, meter, toolbar | Defines whether the orientation of the component is horizontal or vertical. Defines whether the meter bar is displayed horizontally or vertically. | "horizontal" | "vertical" |
| 57 | _spell-check | input-text, textarea | Defines whether the browser should check the spelling and grammar. | boolean |
| 58 | _aria-current-value | link, link-button | Defines the value for the aria-current attribute. | "date" | "false" | "location" | "page" | "step" | "time" | "true" |
| 59 | _download | link, link-button | Tells the browser that the link contains a file. Optionally sets the filename. | string |
| 60 | _href | link, link-button, quote, tree-item | Sets the target URI of the link or citation source. Defines the target URI of the link. | string |
| 61 | _target | link, link-button | Defines where to open the link. | string |
| 62 | _high | meter | From this value to the max value is the high range of the meter. Below this value is the middle range. | number |
| 63 | _low | meter | From this value to the min value is the low range of the meter. Above this value is the middle range. | number |
| 64 | _optimum | meter | Indicates the optimal range of the element. If this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical. If this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical. If this lies in the middle range, both low and high range will be suboptimum and nothing will be critical. | number |
| 65 | _unit | meter, progress | Defines the unit of the value. Defines the unit of the step values (not shown). | string |
| 66 | _collapsible | nav | Defines if navigation nodes can be collapsed or not. Enabled by default. | boolean |
| 67 | _has-icons-when-expanded | nav | Shows icons next to the navigation item labels, even when the navigation is not collapsed. | boolean |
| 68 | _boundary-count | pagination | Defines the amount of pages to show next to the outer arrow buttons. | number |
| 69 | _has-buttons | pagination | Defines which navigation buttons to render (first, last, next, previous buttons). | boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; } |
| 70 | _page | pagination | Defines the current page. | number |
| 71 | _page-size | pagination | Defines the amount of entries to show per page. | number |
| 72 | _page-size-options | pagination | Defines the options for the page-size-select. | number[] | string |
| 73 | _sibling-count | pagination | Defines the amount of pages to show next to the current page. | number |
| 74 | _popover-align | popover-button | Defines where to show the Popover preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" |
| 75 | _tab-index | popover-button, select | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number |
| 76 | _quote | quote | Defines the text of the quote. | string |
| 77 | _rows | select, single-select, textarea | Maximum number of visible rows of the element. | number |
| 78 | _show | spin | Makes the element show up. | boolean |
| 79 | _allow-multi-sort | table-stateful | Defines whether to allow multi sort. | boolean |
| 80 | _aria-labelledby | table-stateful, table-stateless | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) — use `_label` instead. | string |
| 81 | _data | table-stateful, table-stateless | Defines the primary table data. | KoliBriTableDataType[] | string |
| 82 | _data-foot | table-stateful, table-stateless | Defines the data for the table footer. | KoliBriTableDataType[] | string |
| 83 | _has-settings-menu | table-stateful, table-stateless | Enables the settings menu if true (default: false). | boolean |
| 84 | _headers | table-stateful | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCellWithLogic[][]; vertical?: KoliBriTableHeaderCellWithLogic[][]; } |
| 85 | _pagination | 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<PaginationHasButton>; _pageSize?: number; _pageSizeOptions?: Stringified<number[]>; _siblingCount?: number; _customClass?: string; _label?: string; _tooltipAlign?: AlignPropType; } |
| 86 | _pagination-position | table-stateful | Controls the position of the pagination. | "both" | "bottom" | "top" |
| 87 | _selection | table-stateful, table-stateless | Defines how rows can be selected and the current selection. | string | ({ disabledKeys?: KoliBriTableSelectionKeys; keyPropertyName?: string; label: (row: KoliBriTableDataType) => string; multiple?: boolean; selectedKeys?: KoliBriTableSelectionKeys; }) |
| 88 | _header-cells | table-stateless | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; } |
| 89 | _behavior | tabs | Defines which behavior is active. | "select-automatic" | "select-manual" |
| 90 | _has-create-button | tabs | Defines whether the element has a create button. | boolean |
| 91 | _selected | tabs | Defines which tab is active. | number |
| 92 | _tabs | tabs | Defines the tab captions. | TabButtonProps[] | string |
| 93 | _adjust-height | textarea | Adjusts the height of the element to its content. | boolean |
| 94 | _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`. | "none" | "vertical" |
| 95 | _active | tree-item | If set (to true) the tree item is the active one. | boolean |
| 96 | _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.