# Feature DREAM-901 - Create Primer ColorField component and color_field form input

Project: Stream Design System
Status: tested
URL: https://community.openproject.org/work_packages/DREAM-901

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.0.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 |  |

## Details

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

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| 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** use a Primer color input that combines a hex code field with a color picker  
**so that** users can type a hex code or pick a color, and see the result immediately.

**Acceptance criteria**

  - A `color_field` form input and a `Primer::OpenProject::ColorField` component are available in Primer View Components.

  - The field shows a color swatch inside a hex code text input. Clicking the swatch opens the browser's native color picker.

  - Typing a valid hex code (three or six digits, `#` optional) updates the swatch. On leaving the field, the code is normalised to uppercase `#RRGGBB`.

  - Picking a color updates the hex code.

  - The field can be left blank. While blank, the swatch previews the placeholder color, if there is one.

  - Invalid input is left as typed. Validation remains on the server.

  - The picker cannot be opened on disabled and read-only fields. Without JavaScript, the field still works as a plain hex code input.

  - Can be tested on <https://qa.openproject-edge.com/lookbook/inspect/primer/open_project/color_field/playground> 

**Technical notes**

  - Implemented in [opf/primer\_view\_components\#537](https://github.com/opf/primer_view_components/pull/537).

  - Only the text input is submitted. The native color input is an unnamed companion, kept in sync by a Catalyst controller.

**Permissions and visibility considerations**

  - None. Visibility follows the form that uses the input.

**Translation considerations**

  - Two new English strings in Primer View Components for the accessible name of the picker: "Pick color for %{label}" and "Pick color".

**Out of scope**

  - Using the input in OpenProject forms, such as the color forms in [DREAM-898](https://community.openproject.org/wp/DREAM-898).

  - Alpha channel, `rgb()`, `hsl()` and named colors.

  - Client-side validation messages.

*Set the* **To be informed/consulted teams** *field to include all teams necessary to be informed of the changes.*