diff --git a/docs/components/forms/color-picker.md b/docs/components/forms/color-picker.md
index 24b0b273..7050e0ba 100644
--- a/docs/components/forms/color-picker.md
+++ b/docs/components/forms/color-picker.md
@@ -167,12 +167,16 @@ const argsInline = ref({
 	inline: true,
 	label: "Cor",
 	modelValue: '#2AC092',
+	state: 'default',
+	errorMessage: 'Campo obrigatório',
 });
 
 const argsWithPopover = ref({
 	swatch: swatchWithPopover,
 	popoverHeight: 190,
 	modelValue: '#2AC092',
+	state: 'default',
+	errorMessage: 'Campo obrigatório',
 });
 
 onMounted(() => {
diff --git a/package.json b/package.json
index 40f08486..b375b167 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.152.2",
+	"version": "3.153.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
index 95188df7..5987301f 100644
--- a/src/components/ColorPicker.vue
+++ b/src/components/ColorPicker.vue
@@ -72,6 +72,12 @@
 			</div>
 		</CdsPopover>
 	</div>
+	<div
+		v-if="hasError"
+		class="error-text"
+	>
+		{{ errorMessage }}
+	</div>
 </template>
 
 <script>
@@ -124,6 +130,21 @@ export default {
 			type: Array,
 			default: () => ([]),
 		},
+		/**
+		* Especifica o estado do TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'.
+		* @values default, valid, loading, invalid
+		*/
+		state: {
+			type: String,
+			default: 'default',
+		},
+		/**
+		* Especifica a mensagem de erro, que será exibida caso o estado seja inválido
+		*/
+		errorMessage: {
+			type: String,
+			default: 'Valor inválido',
+		},
 	},
 
 	data() {
@@ -144,6 +165,10 @@ export default {
 		palete() {
 			return this.paleteBuilder(this.sassColorVariables.palete);
 		},
+
+		hasError() {
+			return this.state === 'invalid';
+		},
 	},
 
 	watch: {
@@ -263,4 +288,10 @@ export default {
 .popover__container {
 	display: flex;
 }
+
+.error-text {
+	@include tokens.caption;
+	color: tokens.$rc-600;
+	margin: tokens.mt(1);
+}
 </style>
diff --git a/src/tests/__snapshots__/ColorPicker.spec.ts.snap b/src/tests/__snapshots__/ColorPicker.spec.ts.snap
index 2c28fe0f..7815b743 100644
--- a/src/tests/__snapshots__/ColorPicker.spec.ts.snap
+++ b/src/tests/__snapshots__/ColorPicker.spec.ts.snap
@@ -77,5 +77,6 @@ exports[`ColorPicker > renders correctly 1`] = `
       </div>
     </div>
   </div>
-</div>"
+</div>
+<!--v-if-->"
 `;