ListBox

The ListBox component displays a list of items and allows selection, reordering, and transfer between two or more list boxes.

Sass Variables

The Telerik and Kendo UI ListBox is a composite UI component that consists of Buttons and List elements. To configure and customize the appearance of the ListBox, modify the Button component Sass variables, as well as the Sass variables provided by the List component.

VariableDefault ValueComputed ValueValue
kendo-listbox-spacingk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The spacing between the ListBox elements.
kendo-listbox-button-spacingk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The spacing between the ListBox buttons.
kendo-listbox-width10em10emDefault: 10emComputed: 10em
Description: The width of the ListBox.
kendo-listbox-default-height200px200pxDefault: 200pxComputed: 200px
Description: The height of the ListBox.
kendo-listbox-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the ListBox.
kendo-listbox-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the ListBox.
kendo-listbox-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the ListBox.
kendo-listbox-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the ListBox.
kendo-listbox-text$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the ListBox.
kendo-listbox-bg$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the ListBox.
kendo-listbox-border$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the ListBox.
kendo-listbox-item-padding-xnullnullDefault: nullComputed: null
Description: The inline padding of the ListBox item.
kendo-listbox-item-padding-ynullnullDefault: nullComputed: null
Description: The block padding of the ListBox item.
kendo-listbox-drop-hint-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the ListBox drop hint.
kendo-listbox-drop-hint-border-widthnullnullDefault: nullComputed: null
Description: The width of the border around the ListBox drop hint.

List Variables

VariableDefault ValueComputed ValueValue
kendo-list-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the List components.
kendo-list-font-sizenullnullDefault: nullComputed: null
Description: The font size of the List component, if no size is set.
kendo-list-line-heightnullnullDefault: nullComputed: null
Description: The line height of the List component, if no size is set.
kendo-list-header-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the List header, if no size is set.
kendo-list-header-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the List header, if no size is set.
kendo-list-header-border-width0 0 1px(0 0 1px)Default: 0 0 1pxComputed: (0 0 1px)
Description: The border width of the List header.
kendo-list-header-font-sizenullnullDefault: nullComputed: null
Description: The font size of the List header, if no size is set.
kendo-list-header-line-heightnullnullDefault: nullComputed: null
Description: The line height of the List header, if no size is set.
kendo-list-header-font-weightvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal)
Description: The font weight of the List header.
kendo-list-filter-paddingk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The padding of the the List filter input.
kendo-list-item-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the List items, when no size is set.
kendo-list-item-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the List items, when no size is set.
kendo-list-item-font-sizenullnullDefault: nullComputed: null
Description: The font size of the List items, if no size is set.
kendo-list-item-line-heightnullnullDefault: nullComputed: null
Description: The line height of the List items, if no size is set.
kendo-list-group-item-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the List group items, when no size is set.
kendo-list-group-item-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the List group items, when no size is set.
kendo-list-group-item-border-width1px 0 0(1px 0 0)Default: 1px 0 0Computed: (1px 0 0)
Description: The border width of the List group items.
kendo-list-group-item-font-sizenullnullDefault: nullComputed: null
Description: The font size of the List group items, if no size is set.
kendo-list-group-item-line-heightnullnullDefault: nullComputed: null
Description: The line height of the List group items, if no size is set.
kendo-list-group-item-font-weightvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal)
Description: The font weight of a List group item.
kendo-list-sizes
sm: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-0\\.5, 0.125rem)","header-font-size":null,"header-line-height":null,"item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-0\\.5, 0.125rem)","item-font-size":null,"item-line-height":null,"group-item-padding-x":"var(--kendo-spacing-2, 0.5rem)","group-item-padding-y":"var(--kendo-spacing-0\\.5, 0.125rem)","group-item-font-size":null,"group-item-line-height":null
md: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-1, 0.25rem)","header-font-size":null,"header-line-height":null,"item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-1, 0.25rem)","item-font-size":null,"item-line-height":null,"group-item-padding-x":"var(--kendo-spacing-2, 0.5rem)","group-item-padding-y":"var(--kendo-spacing-1, 0.25rem)","group-item-font-size":null,"group-item-line-height":null
lg: "font-size":"var(--kendo-font-size-lg, inherit)","line-height":"var(--kendo-line-height-lg, normal)","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","header-font-size":null,"header-line-height":null,"item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-2, 0.5rem)","item-font-size":null,"item-line-height":null,"group-item-padding-x":"var(--kendo-spacing-2, 0.5rem)","group-item-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","group-item-font-size":null,"group-item-line-height":null
Computed: (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-0\.5, 0.125rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-item-font-size: null, group-item-line-height: null), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1, 0.25rem), group-item-font-size: null, group-item-line-height: null), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1\.5, 0.375rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-item-font-size: null, group-item-line-height: null))
Description: The map with the sizes of the List.
kendo-list-bg$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the List component.
kendo-list-text$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the List component.
kendo-list-border$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the List component.
kendo-list-header-bgnullnullDefault: nullComputed: null
Description: The background color of the List header.
kendo-list-header-textnullnullDefault: nullComputed: null
Description: The text color of the List header.
kendo-list-header-borderinheritinheritDefault: inheritComputed: inherit
Description: The border color of the List header.
kendo-list-header-shadowk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))Default: k-elevation(2)Computed: var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description: The box shadow of the List header.
kendo-list-item-bgnullnullDefault: nullComputed: null
Description: The background color of the List items.
kendo-list-item-textnullnullDefault: nullComputed: null
Description: The text color of the List items.
kendo-list-item-hover-bg$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)Default: $kendo-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb)
Description: The background color of the hovered List items.
kendo-list-item-hover-text$kendo-hover-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-hover-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the hovered List items.
kendo-list-item-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the focused List items.
kendo-list-item-focus-textnullnullDefault: nullComputed: null
Description: The text color of the focused List items.
kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, .12)(inset 0 0 0 2px rgba(0, 0, 0, 0.12))Default: inset 0 0 0 2px rgba(0, 0, 0, .12)Computed: (inset 0 0 0 2px rgba(0, 0, 0, 0.12))
Description: The box shadow of the focused List items.
kendo-list-item-selected-bg$kendo-selected-bgvar(--kendo-color-primary, #ff6358)Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358)
Description: The background color of the selected List items.
kendo-list-item-selected-text$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)Default: $kendo-selected-textComputed: var(--kendo-color-on-primary, #ffffff)
Description: The text color of the selected List items.
kendo-list-group-item-bgnullnullDefault: nullComputed: null
Description: The background color of the List group items.
kendo-list-group-item-textnullnullDefault: nullComputed: null
Description: The text color of the List group items.
kendo-list-group-item-borderinheritinheritDefault: inheritComputed: inherit
Description: The border color of the List group items.
kendo-list-group-item-shadownullnullDefault: nullComputed: null
Description: The base shadow of the List group items.
kendo-list-option-label-text$kendo-subtle-textvar(--kendo-color-subtle, #666666)Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666)
Description: The color of the 'Option Label' text.
Feedback