# Feature DREAM-918 - Add validation API to Primer ColorField element

Project: Stream Design System
Status: review failed
URL: https://community.openproject.org/work_packages/DREAM-918

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.1.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee | Alexander Coles |
| Accountable |  |
| Product manager |  |
| Developers | Alexander Coles |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** a developer building OpenProject forms  
**I want to** show, clear and style validation messages on a `color_field` from JavaScript  
**so that** client-side checks look and read the same as server-side validation errors, without reaching into Primer's markup.

**Acceptance criteria**

*   `PrimerColorInputElement` (`<primer-color-input>`) offers `setError(message)`, `setSuccess(message)` and `clearError()`, matching `PrimerTextFieldElement`.

*   `setError` shows the message in the field's inline validation element with the error icon, and marks the text input invalid (`invalid` and `aria-invalid`).

*   `setSuccess` shows the message with the success icon and success styling.

*   `clearError` hides the validation element, empties the message and removes `invalid` and `aria-invalid` from the text input.

*   The validation message stays referenced by the text input's `aria-describedby`.

**Technical notes**

*   Follow-up to [DREAM-901](https://community.openproject.org/wp/DREAM-901), which listed client-side validation messages as out of scope.

*   First consumer: the color form's contrast check in [DREAM-898](https://community.openproject.org/wp/DREAM-898). Its `color-contrast` Stimulus controller manipulates the validation element directly until this API exists; switch it over once released.

*   `ColorFieldInput` inherits from `Input`, not `TextFieldInput`, so the text field's Catalyst targets (`validationElement`, `validationMessageElement`, `validationSuccessIcon`, `validationErrorIcon`) need adding for `primer-color-input`.

**Permissions and visibility considerations**

*   None.

**Translation considerations**

*   None. Messages are supplied by the caller.

**Out of scope**

*   Client-side format validation inside the component. Validation stays with the caller and the server.