ChipListProps

Represents the properties of ChipList component.

Name	Type	Default	Description
ariaDescribedBy?	string		Identifies the element(s) which will 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 will 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		Triggered after value change. jsx <ChipList onChange={(event) => console.log(event.value)} />
onClick?	(args: KendoMouseEvent<ChipListHandle>) => void
onDataChange?	(event: ChipListDataChangeEvent) => void		Triggered after Chip data change. jsx <ChipList onDataChange={(event) => console.log(event.value)} />
onDoubleClick?	(args: KendoMouseEvent<ChipListHandle>) => void
onMouseDown?	(args: KendoMouseEvent<ChipListHandle>) => void
onMouseEnter?	(args: KendoMouseEvent<ChipListHandle>) => void
onMouseLeave?	(args: KendoMouseEvent<ChipListHandle>) => void
onMouseMove?	(args: KendoMouseEvent<ChipListHandle>) => void
onMouseOut?	(args: KendoMouseEvent<ChipListHandle>) => void
onMouseOver?	(args: KendoMouseEvent<ChipListHandle>) => void
onMouseUp?	(args: KendoMouseEvent<ChipListHandle>) => void
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" />