• Introduction
  • Getting Started
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • 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 / ChipProps / 
New to Kendo UI for Vue? Start a free 30-day trial

ChipProps

Represents the properties of Chip component.

NameTypeDefaultDescription

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.

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.

dataItem?

any

Represents the item data, coming from the ChipList component.

dir?

string

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

disabled?

boolean

Determines if the Chip is disabled.

fillMode?

"null" | 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 Chip.

look?

string

Determines if the Chip style is filled or outlined.

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.

rounded?

"null" | 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.

size?

"null" | 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.

themeColor?

"null" | string

base

Configures the themeColor of the Chip.

The available options are:

  • base
  • info
  • success
  • warning
  • error
  • null—Does not set a themeColor class.

value?

any

Sets the id value of the Chip.

Methods

onBlur

Triggered on onBlur event.

Parameters

event

ChipFocusEvent

onClick

Triggered on onClick event.

Parameters

event

ChipMouseEvent

onFocus

Triggered on onFocus event.

Parameters

event

ChipFocusEvent

onKeydown

Triggered on onKeyDown event.

Parameters

event

ChipKeyboardEvent

onRemove

Triggered on Chip removing.

Parameters

event

ChipRemoveEvent

In this article

Not finding the help you need?

Contact Support