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, 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, dialog, input-checkbox, input-password, link, link-button, modal, popover-button, progress, quote, spin, split-button | 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" "default" | "visibility-toggle" "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; } & { _on?: ButtonCallbacksPropType<StencilUnknown>; _type?: "button" | "reset" | "submit"; _ariaExpanded?: boolean; _tabIndex?: number; _value?: StencilUnknown; _accessKey?: string; _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. | 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" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _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. | 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. | 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 | _options | input-radio, select, single-select | Options the user can choose from. | RadioOption<StencilUnknown>[] | string (Option<StencilUnknown> | Optgroup<StencilUnknown>)[] | string Option<StencilUnknown>[] | string |
| 55 | _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" |
| 56 | _spell-check | input-text, textarea | Defines whether the browser should check the spelling and grammar. | boolean |
| 57 | _aria-current-value | link, link-button | Defines the value for the aria-current attribute. | "date" | "false" | "location" | "page" | "step" | "time" | "true" |
| 58 | _download | link, link-button | Tells the browser that the link contains a file. Optionally sets the filename. | string |
| 59 | _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 |
| 60 | _target | link, link-button | Defines where to open the link. | string |
| 61 | _high | meter | Defines the upper boundary of the high range. | number |
| 62 | _low | meter | Defines the lower boundary of the low range. | number |
| 63 | _optimum | meter | Defines the optimal value of the element. | number |
| 64 | _unit | meter, progress | Defines the unit of the step values (not shown). | string |
| 65 | _collapsible | nav | Defines if navigation nodes can be collapsed or not. Enabled by default. | boolean |
| 66 | _has-icons-when-expanded | nav | Shows icons next to the navigation item labels, even when the navigation is not collapsed. | boolean |
| 67 | _boundary-count | pagination | Defines the amount of pages to show next to the outer arrow buttons. | number |
| 68 | _has-buttons | pagination | Defines which navigation buttons to render (first, last, next, previous buttons). | boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; } |
| 69 | _page | pagination | Defines the current page. | number |
| 70 | _page-size | pagination | Defines the amount of entries to show per page. | number |
| 71 | _page-size-options | pagination | Defines the options for the page-size-select. | number[] | string |
| 72 | _sibling-count | pagination | Defines the amount of pages to show next to the current page. | number |
| 73 | _popover-align | popover-button | Defines where to show the Popover preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" |
| 74 | _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 |
| 75 | _quote | quote | Defines the text of the quote. | string |
| 76 | _rows | select, single-select, textarea | Maximum number of visible rows of the element. | number |
| 77 | _show | spin | Makes the element show up. | boolean |
| 78 | _allow-multi-sort | table-stateful | Defines whether to allow multi sort. | boolean |
| 79 | _data | table-stateful, table-stateless | Defines the primary table data. | KoliBriTableDataType[] | string |
| 80 | _data-foot | table-stateful, table-stateless | Defines the data for the table footer. | KoliBriTableDataType[] | string |
| 81 | _has-settings-menu | table-stateful, table-stateless | Enables the settings menu if true (default: false). | boolean |
| 82 | _headers | table-stateful | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCellWithLogic[][]; vertical?: KoliBriTableHeaderCellWithLogic[][]; } |
| 83 | _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; } |
| 84 | _pagination-position | table-stateful | Controls the position of the pagination. | "both" | "bottom" | "top" |
| 85 | _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; }) |
| 86 | _header-cells | table-stateless | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; } |
| 87 | _behavior | tabs | Defines which behavior is active. | "select-automatic" | "select-manual" |
| 88 | _has-create-button | tabs | Defines whether the element has a create button. | boolean |
| 89 | _selected | tabs | Defines which tab is active. | number |
| 90 | _tabs | tabs | Defines the tab captions. | TabButtonProps[] | string |
| 91 | _adjust-height | textarea | Adjusts the height of the element to its content. | boolean |
| 92 | _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" |
| 93 | _active | tree-item | If set (to true) the tree item is the active one. | boolean |
| 94 | _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.