• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / ListBox / API / ListBoxProps / 

ListBoxProps

Represents the props of the KendoReact ListBox component.

NameTypeDefaultDescription

className?

string

Sets a class of the ListBox container.

data

any[]

Set the data of the ListBox.

draggable?

boolean

Makes the items of the ListBox draggable. The items are draggable by default.

id?

string

Sets a id of the ListBox container.

item?

React.ComponentType<any>

Defines the component that will be rendered for each item of the data collection.

onDragLeave?

(event: ListBoxDragLeaveEvent) => void

Fires when a dragged element or text selection leaves the ListBox element.

onDragOver?

(event: ListBoxDragEvent) => void

Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.

onDragStart?

(event: ListBoxDragEvent) => void

Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.

onDrop?

(event: ListBoxDragEvent) => void

Fires when an the user drops an item. The event contains information for the drop target item.

onItemClick?

(event: ListBoxItemClickEvent) => void

Fires when an item from the ListBox is clicked. Contains the clicked item.

onKeyDown?

(event: ListBoxKeyDownEvent) => void

Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.

selectedField?

string

Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.

size?

"null" | "small" | "large" | "medium"

medium

Configures the size of the ListBox.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size className.

style?

React.CSSProperties

Specifies the styles which are set to the ListBox container.

textField

string

Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.

toolbar?

"null" | ComponentType<any>

Renders a toolbar component next to the ListBox.

toolbarPosition?

string

Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.

  • The possible values are:
  • top
  • bottom
  • left
  • right (Default)
  • none

valueField?

string

The field that be used during form submit. Defaults to the textField if not set.

In this article

Not finding the help you need?

Contact Support