ChipListProps

Represents the properties of ChipList component.

Name	Type	Default	Description
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. jsx <ChipList ariaDescribedBy="description" />
ariaLabel?	string		The accessible label of the component. jsx <ChipList ariaLabel="ChipList" />
ariaLabelledBy?	string		Identifies the element(s) which label the component. jsx <ChipList ariaLabelledBy="label" />
chip?	React.ComponentType<ChipProps>		Represents Chip component. jsx <ChipList chip={CustomChip} />
className?	string		Sets additional classes to the ChipList. jsx <ChipList className="custom-chiplist" />
data?	any		Represents the data about the child Chips. jsx <ChipList data={[{ text: 'Chip1' }, { text: 'Chip2' }]} />
defaultData?	any[]		Represents the default data about the child Chips. jsx <ChipList defaultData={[{ text: 'DefaultChip1' }, { text: 'DefaultChip2' }]} />
defaultValue?	any		Represents the default value of the selection state of Chip component. jsx <ChipList defaultValue={[{ text: 'DefaultSelectedChip' }]} />
dir?	string		The ChipList direction 'ltr' as default or 'rtl'. jsx <ChipList dir="rtl" />
disabled?	boolean		Determines of ChipList is disabled. jsx <ChipList disabled={true} />
id?	string		Sets the id property of the top div element of the ChipList. 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. jsx <ChipList onChange={(event) => console.log(event.value)} />
onClick?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the element is clicked.
onDataChange?	(event: ChipListDataChangeEvent) => void		Fires after Chip data change. jsx <ChipList onDataChange={(event) => console.log(event.value)} />
onDoubleClick?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the element is double-clicked.
onMouseDown?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the mouse button is pressed down on the element.
onMouseEnter?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the mouse pointer enters the element.
onMouseLeave?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the mouse pointer leaves the element.
onMouseMove?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the mouse pointer moves over the element.
onMouseOut?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the mouse pointer leaves the element or any of its child elements.
onMouseOver?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the mouse pointer moves over the element or any of its child elements.
onMouseUp?	(args: KendoMouseEvent<ChipListHandle>) => void		Fired when the mouse button is released over the element.
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. jsx <ChipList selection="multiple" />
size?	"null" | "small" | "large" | "medium"	'medium'	Configures the size of the ChipList. The available options are: — small — medium — large — null — Does not set a size className. jsx <ChipList size="large" />
style?	React.CSSProperties		Sets additional CSS styles to the ChipList. jsx <ChipList style={{ margin: '10px' }} />
tabIndex?	number		Sets the tabIndex attribute. jsx <ChipList tabIndex={0} />
textField?	string		Represents the text field of Chip, used for the label. 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. jsx <ChipList value={[{ text: 'SelectedChip' }]} />
valueField?	string		Represents the value field of Chip, used for setting the Chip id. jsx <ChipList valueField="id" />