ChipList Controlled Mode

Updated on Nov 11, 2026

The ChipList can manage its selection and data internally, or your application can control either state. Use defaultValue and defaultDataItems to provide initial state when the component manages it.

Controlling the Value

To set the initial selection while the ChipList manages it, set the defaultValue prop to the desired chip value.

To control the selection, pass the selected chip value or values through value and update it in the change event handler. Set selection to single or multiple to enable selection. The event's value contains the new selection, which you must store and pass back to the ChipList so the rendered selection stays in sync.

Example

View Source

Loading ...

Controlling the Data State

To let the ChipList manage its items, set the initial data with defaultDataItems. To control the data state:

• Store the current items in a state variable and pass them to dataItems.
• Handle the datachange event and update that state with event.value. This keeps the rendered items in sync with your state, so a removed Chip does not reappear on the next render.

Example

View Source

Loading ...

Suggested Links

• ChipList Selection Mode
• API Reference of the ChipList