# Controlled Mode

By default, the ColorPicker is in an uncontrolled state.

The ColorPicker provides options for:

* [Controlling its value](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/colorpicker/controlled#controlling-the-value)
* [Controlling its popup state](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/colorpicker/controlled#controlling-the-popup-state)

## Controlling the Value

To manage the value of the ColorPicker:

1. Use its [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/colorpickerprops#value) property.
2. Handle the [`onChange`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/colorpickerprops#onchange) event.
3. Pass the new value through the props.

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

## Controlling the Popup State

To manage the popup and set the open state of the ColorPicker, use its [`open`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/colorpickerprops#open) property.

The following example demonstrates how to control the state of the ColorPicker upon display.

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

## Suggested Links

* [API Reference of the ColorPicker](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/colorpickerprops)