New to KendoReact? Start a free 30-day trial

ListBoxProps

Interface

Represents the props of the KendoReact ListBox component.

Definition

Package:@progress/kendo-react-listbox

Properties

className?

string

Sets a class of the ListBox container.

Example:

jsx

<ListBox className="custom-class" />

data

any[]

Sets the data of the ListBox.

Example:

jsx

<ListBox data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />

draggable?

boolean

Makes the items of the ListBox draggable.

Default:

true

Example:

jsx

<ListBox draggable={false} />

id?

string

Sets an id of the ListBox container.

Example:

jsx

<ListBox id="listbox-id" />

item?

ComponentType<any>

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

Example:

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.

Parameters:eventListBoxDragLeaveEvent

Example:

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.

Parameters:eventListBoxDragEvent

Example:

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.

Parameters:eventListBoxDragEvent

Example:

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.

Parameters:eventListBoxDragEvent

Example:

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.

Parameters:eventListBoxItemClickEvent

Example:

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.

Parameters:eventListBoxItemSelectEvent

Example:

jsx

<ListBox onItemSelect={(event) => console.log(event.item)} />

onKeyboardNavigate?

(event: ListBoxItemNavigateEvent) => void

Fires when a keyboard navigation action is triggered.

Parameters:eventListBoxItemNavigateEvent

Example:

jsx

<ListBox onKeyboardNavigate={(event) => console.log(event.item)} />

onKeyDown?

(event: ListBoxKeyDownEvent) => void

Fires on keydown over the ListBox list items. You can use it to add extra keyboard navigation options.

Parameters:eventListBoxKeyDownEvent

Example:

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 is selected or not.

Example:

jsx

<ListBox selectedField="isSelected" />

size?

"small" | "medium" | "large"

Configures the size of the ListBox.

The available options are:

small
medium
large

Default:

undefined (theme-controlled)

Example:

jsx

<ListBox size="large" />

style?

CSSProperties

Specifies the styles which are set to the ListBox container.

Example:

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.

Example:

jsx

<ListBox textField="name" />

null | ComponentType<any>

Renders a toolbar component next to the ListBox.

Example:

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

Default:

'right'

Example:

jsx

<ListBox toolbarPosition="top" />

valueField?

string

The field that is used during form submission. Defaults to the textField if not set.

Example:

jsx

<ListBox valueField="id" />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.