# ChipList Controlled Mode

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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#defaultValue) prop to the desired chip value.

To control the selection, pass the selected chip value or values through [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#value) and update it in the `change` event handler. Set [`selection`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chiplist/controlled-value/source.txt)

## Controlling the Data State

To let the ChipList manage its items, set the initial data with [`defaultDataItems`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#defaultdataitems). To control the data state:

* Store the current items in a state variable and pass them to [`dataItems`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chiplist/controlled/source.txt)

## Suggested Links

* [ChipList Selection Mode](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/selection-mode)
* [API Reference of the ChipList](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops)