Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

ChipProps

Represents the properties of Chip component.

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to an HTML aria-describedby attribute. For example, these elements could contain an error or a hint message.

children?

React.ReactNode

The React elements that will be rendered as custom content inside the Chip.

className?

string

Sets additional classes to the Chip.

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
  • 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.

onBlur?

(event: ChipFocusEvent) => void

Triggered on onBlur event.

onClick?

(event: ChipMouseEvent) => void

Triggered on onClick event.

onDoubleClick?

(event: ChipMouseEvent) => void

Triggered on onDoubleClick event.

onFocus?

(event: ChipFocusEvent) => void

Triggered on onFocus event.

onKeyDown?

(event: ChipKeyboardEvent) => void

Triggered on onKeyDown event.

onMouseDown?

(event: ChipMouseEvent) => void

Triggered on onMouseDown event.

onMouseEnter?

(event: ChipMouseEvent) => void

Triggered on onMouseEnter event.

onMouseLeave?

(event: ChipMouseEvent) => void

Triggered on onMouseLeave event.

onMouseMove?

(event: ChipMouseEvent) => void

Triggered on onMouseMove event.

onMouseOut?

(event: ChipMouseEvent) => void

Triggered on onMouseOut event.

onMouseOver?

(event: ChipMouseEvent) => void

Triggered on onMouseOver event.

onMouseUp?

(event: ChipMouseEvent) => void

Triggered on onMouseUp 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.

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.