Introduction
Getting Started
Vue 2 End of Support
Vue Wrappers End of Life
Native Components
- Animation
- Buttons
- - Overview
  - Button
  - ButtonGroup
  - Chip
  - ChipList
  - DropDownButton
  - FloatingActionButton
  - Toolbar
  - SplitButton
  - Globalization
  - API
- Chartsupdated
- Conversational UI
- Data Tools
- Date Inputs
- Dialogs
- Drawing
- Dropdowns
- Editor
- Excel Export
- File Saver
- Form
- Gauges
- Gridupdated
- Icons
- Indicators
- Inputsupdated
- Labels
- Layout
- ListBox
- ListView
- Notification
- PDF Processing
- Popup
- Progress Bars
- Scheduler
- ScrollView
- Tooltip
- TreeList
- TreeView
- Upload
Wrapper Components
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
FAQ
Troubleshooting

Components / Buttons / API / ChipListProps /

New to Kendo UI for Vue? Start a free 30-day trial

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.
ariaLabelledBy?	`string`		Identifies the element(s) which will label the component.
avatar?	`string \| Object \| Function`		If set to object of type ChipAvatarProps with image and imageAlt it renders a default Avatar. If set to string or a `render` function it defines the avatar template that will be shown.
avatarField?	`object`		Represents the 'avatar' field in the Chip, defaults to 'avatar'.
chip?	`any`		Represents Chip component.
className?	`string`		Sets additional classes to the ChipList.
dataItem?	`any`		Represents the item data, coming from the `ChipList` component.
dataItems?	`any`		Represents the data about the child Chips.
defaultDataItems?	`any[]`		Represents the default data about the child Chips.
defaultValue?	`any`		Represents the default value of the selection state of Chip component.
dir?	`string`		The ChipList direction 'ltr' as default or 'rtl'.
disabled?	`boolean`		Determines of ChipList is disabled.
fillMode?	`string`	`solid`	Configures the `fillMode` of the Chip. The available options are: solid outline flat null—Does not set a fillMode `class`.
icon?	`string`		Determines if the Chip has an `icon`.
id?	`string`		Sets the `id` property of the top div element of the ChipList.
look?	`string`		Determines if the Chip style is `filled` or `outlined`.
name?	`string`		Specifies the `name` property of the `input` DOM element.
onBlur?	`(event: ChipFocusEvent) => void`		Triggered on onBlur event.
onChange?	`(event: ChipListChangeEvent) => void`		Triggered after value change.
onClick?	`(event: ChipMouseEvent) => void`		Triggered on onClick event.
onDatachange?	`(event: ChipListDataChangeEvent) => void`		Triggered after Chip data change.
onFocus?	`(event: ChipFocusEvent) => void`		Triggered on onFocus event.
onKeydown?	`(event: ChipKeyboardEvent) => void`		Triggered on onKeyDown event.
onRemove?	`(event: ChipRemoveEvent) => void`		Triggered on Chip removing.
removable?	`boolean`		Determines if the Chip could be removed.
removeIcon?	`string`		Determines if the Chip has custom `removeIcon`.
removeSvgIcon?	`SVGIcon`		Defines an remove SVGIcon to be rendered within the chip.
required?	`boolean`		Specifies if `null` is a valid value for the component.
rounded?	`string`	`medium`	Configures the `roundness` of the Chip. The available options are: small medium large full null—Does not set a rounded `class`.
selected?	`boolean`		Determines if the Chip is selected.
selectedIcon?	`string`		Determines if the Chip has custom selection `icon`.
selectedSvgIcon?	`SVGIcon`		Defines an selection SVGIcon to be rendered within the chip.
selection?	`string`		Represents the selection state of Chip component.
size?	`string`	`medium`	Configures the `size` of the Chip. The available options are: small medium large null—Does not set a size `class`.
svgIcon?	`SVGIcon`		Defines an SVGIcon to be rendered within the chip.
tabIndex?	`number`		Sets the `tabIndex` attribute.
text?	`string`		Sets the label text of the Chip.
textField?	`string`		Represents the `text` field of Chip, defaults to 'text'.
themeColor?	`string`	`base`	Configures the `themeColor` of the Chip. The available options are: base info success warning error null—Does not set a themeColor `class`.
valid?	`boolean`		Overrides the validity state of the component. If `valid` is set, the `required` property will be ignored.
validationMessage?	`string`		Controls the form error message of the component. If set to an empty string, no error will be thrown.
validityStyles?	`boolean`		If set to `false`, no visual representation of the invalid state of the component will be applied.
value?	`any`		Represents the selection state of Chip component.
valueField?	`string`		Represents the `value` field of the Chip, defaults to 'value'.

ChipListProps

In this article

Not finding the help you need?