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-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
Description: The spacing between the ListBox elements.
kendo-listbox-button-spacingk-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
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-family$kendo-font-familyinheritDefault: $kendo-font-familyComputed: inherit
Description: The font family of the ListBox.
kendo-listbox-font-size$kendo-font-size-md14pxDefault: $kendo-font-size-mdComputed: 14px
Description: The font size of the ListBox.
kendo-listbox-line-height$kendo-line-height-md1.4285714286Default: $kendo-line-height-mdComputed: 1.4285714286
Description: The line height of the ListBox.
kendo-listbox-text$kendo-component-text #424242Default: $kendo-component-textComputed: #424242
Description: The text color of the ListBox.
kendo-listbox-bg$kendo-component-bg #ffffffDefault: $kendo-component-bgComputed: #ffffff
Description: The background color of the ListBox.
kendo-listbox-border$kendo-component-border rgba(0, 0, 0, 0.08)Default: $kendo-component-borderComputed: 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-family$kendo-font-familyinheritDefault: $kendo-font-familyComputed: 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 1px0 0 1pxDefault: 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-weight$kendo-font-weight-bold700Default: $kendo-font-weight-boldComputed: 700
Description: The font weight of the List header.
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 01px 0 0Default: 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-weight$kendo-font-weight-bold700Default: $kendo-font-weight-boldComputed: 700
Description: The font weight of a List group item.
kendo-list-sizes( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ) )(sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null))Default: ( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ) )Computed: (sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null))
Description: The map with the sizes of the List.
kendo-list-bg$kendo-component-bg #ffffffDefault: $kendo-component-bgComputed: #ffffff
Description: The background color of the List component.
kendo-list-text$kendo-component-text #424242Default: $kendo-component-textComputed: #424242
Description: The text color of the List component.
kendo-list-border$kendo-component-border rgba(0, 0, 0, 0.08)Default: $kendo-component-borderComputed: 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-bg #f0f0f0Default: $kendo-hover-bgComputed: #f0f0f0
Description: The background color of the hovered List items.
kendo-list-item-hover-text$kendo-hover-text #424242Default: $kendo-hover-textComputed: #424242
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-bg #ff6358Default: $kendo-selected-bgComputed: #ff6358
Description: The background color of the selected List items.
kendo-list-item-selected-text$kendo-selected-text whiteDefault: $kendo-selected-textComputed: white
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-no-data-text$kendo-subtle-text #666666Default: $kendo-subtle-textComputed: #666666
Description: The color of the 'No Data' text.
kendo-list-option-label-text$kendo-subtle-text #666666Default: $kendo-subtle-textComputed: #666666
Description: The color of the 'Option Label' text.