---
title: "color"
image: "https://adonia.pages.dev/og.png"
version: "next"
---

> Documentation Index
> Fetch the complete documentation index at: https://adonia.pages.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# color

<!-- Generated by `pnpm docs:fields` from packages/core/src/schema/fields/color.ts. Edit the TSDoc, not this file. -->

Colour picker bound to a string attribute holding a CSS colour.

| | |
| --- | --- |
| Builder | `F.color(attribute: string): ColorField` |
| Wire type key | `color` |
| Class chain | `ColorField` → `Field` |
| Detail projection | `text-entry` |
| Column counterpart | `text` cell, i.e. `C.text(attribute)` |

## Example

```ts
import { F } from '@adonia/core'

F.color('accent').label('Accent').oklch().swatches(['oklch(0.7 0.2 250)'])
```

## Props

Beyond the shared [field DSL](/reference/fields#the-shared-field-dsl):

| Prop | Declared on | Behaviour |
| --- | --- | --- |
| `hex(): this` | `ColorField` | Restricts the stored notation to hex (`#rrggbb`); the default accepts both. |
| `oklch(): this` | `ColorField` | Restricts the stored notation to `oklch(…)`; the default accepts both. |
| `alpha(): this` | `ColorField` | Enables the alpha channel in the picker. A rendering affordance: the §11.1 pattern accepts an alpha component in either notation regardless, because rejecting one that the picker previously produced would strand existing records. |
| `swatches(colors: readonly string[]): this` | `ColorField` | Preset swatches offered beside the picker, in the field's notation. |

## Validation

Vine base: `vine.string()`.

§11.1 mapping: `vine.string()` constrained by the notation's pattern.
Not trimmed — a colour with surrounding whitespace is malformed input,
not sloppy typing, and silently repairing it would hide a broken client.

Contributed by `ColorField.vineSchema()` in `packages/core/src/schema/fields/color.ts`. The shared modifiers (`required`, `nullable`, `requiredWhen`, `unique`, optionality) are applied on top by `Field.buildValidation`, and a `rules()` override replaces the base entirely — the validator compiler never branches on the field class.

## Declared in

- `packages/core/src/schema/fields/color.ts` — `ColorField`

Source: https://adonia.pages.dev/reference/fields/color/index.mdx