ListBoxProps

Represents the props of the KendoReact ListBox component.

Name	Type	Default	Description
className?	string		Sets a class of the ListBox container. jsx <ListBox className="custom-class" />
data	any[]		Sets the data of the ListBox. jsx <ListBox data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
draggable?	boolean		Makes the items of the ListBox draggable. The items are draggable by default. jsx <ListBox draggable={false} />
id?	string		Sets an id of the ListBox container. jsx <ListBox id="listbox-id" />
item?	React.ComponentType<any>		Defines the component that will be rendered for each item of the data collection. jsx const CustomItem = (props) => <div>{props.text}</div>; <ListBox item={CustomItem} />
onDragLeave?	(event: ListBoxDragLeaveEvent) => void		Fires when a dragged element or text selection leaves the ListBox element. jsx <ListBox onDragLeave={(event) => console.log(event.item)} />
onDragOver?	(event: ListBoxDragEvent) => void		Fires when the user drags over an item from the ListBox. The event contains information about the item that is dragged over. jsx <ListBox onDragOver={(event) => console.log(event.item)} />
onDragStart?	(event: ListBoxDragEvent) => void		Fires when the user starts to drag an item from the ListBox. The event contains information about the item that is being dragged. jsx <ListBox onDragStart={(event) => console.log(event.item)} />
onDrop?	(event: ListBoxDragEvent) => void		Fires when the user drops an item. The event contains information about the drop target item. jsx <ListBox onDrop={(event) => console.log(event.item)} />
onItemClick?	(event: ListBoxItemClickEvent) => void		Fires when an item from the ListBox is clicked. Contains the clicked item. jsx <ListBox onItemClick={(event) => console.log(event.item)} />
onItemSelect?	(event: ListBoxItemSelectEvent) => void		Fires when an item from the ListBox is selected. Contains the selected item. jsx <ListBox onItemSelect={(event) => console.log(event.item)} />
onKeyboardNavigate?	(event: ListBoxItemNavigateEvent) => void		Fires when a keyboard navigation action is triggered. jsx <ListBox onKeyboardNavigate={(event) => console.log(event.item)} />
onKeyDown?	(event: ListBoxKeyDownEvent) => void		Fires on keydown over the ListBox list items. It can be used to add extra keyboard navigation options. jsx <ListBox onKeyDown={(event) => console.log(event.keyCode)} />
selectedField?	string		Sets the selected field of the ListBox. Based on the value of this field, an item will be selected or not. jsx <ListBox selectedField="isSelected" />
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. jsx <ListBox size="large" />
style?	React.CSSProperties		Specifies the styles which are set to the ListBox container. jsx <ListBox style={{ width: '300px' }} />
textField	string		Sets the data item field that represents the item text. If the data contains only primitive values, do not define it. jsx <ListBox textField="name" />
toolbar?	"null" | ComponentType<any>		Renders a toolbar component next to the ListBox. jsx <ListBox toolbar={CustomToolbar} />
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 jsx <ListBox toolbarPosition="top" />
valueField?	string		The field that will be used during form submission. Defaults to the textField if not set. jsx <ListBox valueField="id" />