Getting Started
    Native Components
    • Animation
    • Buttons
    • Charts
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • Notificationnew
    • PDF Processing
    • Popup
    • Progress Bars
    • Schedulernew
    • ScrollViewnew
    • Tooltip
    • TreeViewnew
    • Upload
    Wrapper Components
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to Kendo UI for Vue? Start a free 30-day trial

ChipProps

Represents the properties of Chip component.

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.

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 | "solid" | "outline"

(default: solid) Configures the fillMode of the Chip.

The available options are:

  • solid
  • outline
  • flat
  • null—Does not set a fillMode className.

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

Deprecated. Determines if the Chip style is filled or outlined.

onBlur?

(event: ChipFocusEvent) => void

Triggered on onBlur event.

onClick?

(event: ChipMouseEvent) => void

Triggered on onClick event.

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.

rounded?

null | "small" | "medium" | "large" | "full"

(default: medium) Configures the roundness of the Chip.

The available options are:

  • small
  • medium
  • large
  • full
  • null—Does not set a rounded className.

selected?

boolean

Determines if the Chip is selected.

selectedIcon?

string

Determines if the Chip has custom selection icon.

size?

null | "small" | "medium" | "large"

(default: medium) Configures the size of the Chip.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size className.

style?

CSSProperties

Sets additional CSS styles to the Chip.

tabIndex?

number

Sets the tabIndex attribute.

text?

string

Sets the label text of the Chip.

type?

string

Sets the type of the Chip element - 'warning', 'error', 'success', 'info', by default - 'none'.

themeColor?

null | "base" | "info" | "success" | "warning" | "error"

(default: base) Configures the themeColor of the Chip.

The available options are:

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

value?

any

Sets the id value of the Chip.