New to KendoReact? Start a free 30-day trial

ChipListProps

Interface

Represents the properties of ChipList component.

Definition

Package:@progress/kendo-react-buttons

Properties

ariaDescribedBy?

string

Identifies the element(s) which describe the component, similar to HTML aria-describedby attribute. For example, these elements could contain error or hint message.

Example:

jsx

<ChipList ariaDescribedBy="description" />

ariaLabel?

string

The accessible label of the component.

Example:

jsx

<ChipList ariaLabel="ChipList" />

ariaLabelledBy?

string

Identifies the element(s) which label the component.

Example:

jsx

<ChipList ariaLabelledBy="label" />

chip?

ComponentType<ChipProps>

Represents Chip component.

Example:

jsx

<ChipList chip={CustomChip} />

className?

string

Sets additional classes to the ChipList.

Example:

jsx

<ChipList className="custom-chiplist" />

data?

any

Represents the data about the child Chips.

Example:

jsx

<ChipList data={[{ text: 'Chip1' }, { text: 'Chip2' }]} />

defaultData?

any[]

Represents the default data about the child Chips.

Example:

jsx

<ChipList defaultData={[{ text: 'DefaultChip1' }, { text: 'DefaultChip2' }]} />

defaultValue?

any

Represents the default value of the selection state of Chip component.

Example:

jsx

<ChipList defaultValue={[{ text: 'DefaultSelectedChip' }]} />

dir?

string

The ChipList direction 'ltr' as default or 'rtl'.

Example:

jsx

<ChipList dir="rtl" />

disabled?

boolean

Determines of ChipList is disabled.

Example:

jsx

<ChipList disabled={true} />

id?

string

Sets the id property of the top div element of the ChipList.

Example:

jsx

<ChipList id="chiplist1" />

name?

string

Specifies the name property of the input DOM element.

This property is part of the FormComponentProps interface.

onChange?

(event: ChipListChangeEvent) => void

Fires after value change.

Parameters:eventChipListChangeEvent

Example:

jsx

<ChipList onChange={(event) => console.log(event.value)} />

onClick?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the element is clicked.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

onDataChange?

(event: ChipListDataChangeEvent) => void

Fires after Chip data change.

Parameters:eventChipListDataChangeEvent

Example:

jsx

<ChipList onDataChange={(event) => console.log(event.value)} />

onDoubleClick?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the element is double-clicked.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

onMouseDown?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the mouse button is pressed down on the element.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

onMouseEnter?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the mouse pointer enters the element.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

onMouseLeave?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the mouse pointer leaves the element.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

onMouseMove?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the mouse pointer moves over the element.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

onMouseOut?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the mouse pointer leaves the element or any of its child elements.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

onMouseOver?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the mouse pointer moves over the element or any of its child elements.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

onMouseUp?

(args: KendoMouseEvent<ChipListHandle, HTMLDivElement>) => void

Fired when the mouse button is released over the element.

Parameters:argsKendoMouseEvent<ChipListHandle, HTMLDivElement>

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

selection?

string

Represents the selection state of Chip component.

Example:

jsx

<ChipList selection="multiple" />

size?

"small" | "medium" | "large"

Configures the size of the ChipList.

The available options are:

small
medium
large

Default:

undefined (theme-controlled)

Example:

jsx

<ChipList size="large" />

style?

CSSProperties

Sets additional CSS styles to the ChipList.

Example:

jsx

<ChipList style={{ margin: '10px' }} />

tabIndex?

number

Sets the tabIndex attribute.

Example:

jsx

<ChipList tabIndex={0} />

textField?

string

Represents the text field of Chip, used for the label.

Example:

jsx

<ChipList textField="name" />

valid?

boolean

Overrides the validity state of the component. If valid is set, the required property will be ignored.

This property is part of the FormComponentProps interface.

validationMessage?

string

Controls the form error message of the component. If set to an empty string, no error will be thrown.

This property is part of the FormComponentProps interface.

validityStyles?

boolean

If set to false, no visual representation of the invalid state of the component will be applied.

This property is part of the FormComponentProps interface.

value?

any

Represents the selection state of Chip component.

Example:

jsx

<ChipList value={[{ text: 'SelectedChip' }]} />

valueField?

string

Represents the value field of Chip, used for setting the Chip id.

Example:

jsx

<ChipList valueField="id" />