ColorFieldInput

Defined in: packages/core/src/fields/color/types.ts:45

Configuration input for a color() field.

Colour fields store a CSS colour string. format decides which notation the picker writes — "hex" (default), "rgb", "hsl" or "oklch". With themeColors the field may instead store a CSS custom-property reference, var(--primary), which resolves per colour scheme at render time.

Defaults applied by color():

{
  type:        "color",
  label:       "",       // inferred from the field key by defineCollection
  required:    false,    // field is optional by default
  format:      "hex",    // picker writes #RRGGBB / #RRGGBBAA
  themeColors: false,    // picker shows the custom swatch only
  admin: {
    hidden:        false,   // visible in the admin form
    readOnly:      false,   // editable by default
    position:      "main",  // placed in the main content column, not the sidebar
    width:         "full",  // spans the full form width, not half
    cellAlignment: "left",  // swatch aligned left in the data table column
  }
}

Example

// Minimal — label inferred from the key ("Brand Color"), stored as hex
brandColor: color()

// Stored as oklch, ready to interpolate straight into a CSS custom property
primaryLight: color({ format: "oklch", required: true, defaultValue: "oklch(65.7% 0.179 40.9)" })

// Half-width, and offer the host app's design tokens as a second tab
overlayTint: color({ themeColors: true, admin: { width: "half" } })

See

BaseFieldInput for shared properties (label, description, required, admin, index, searchIndex)

Extends

• BaseFieldInput<TFieldMeta>

Type Parameters

TFieldMeta

TFieldMeta extends object = { }

Properties

admin?

optional admin?: FieldAdminConfigInput

Defined in: packages/core/src/fields/baseTypes.ts:209

Admin UI configuration for this field.

Inherited from

BaseFieldInput.admin

---

defaultValue?

optional defaultValue?: string

Defined in: packages/core/src/fields/color/types.ts:51

Pre-filled value shown in the admin form when creating a new document. Does not affect existing database values.

Overrides

BaseFieldInput.defaultValue

---

description?

optional description?: string

Defined in: packages/core/src/fields/baseTypes.ts:194

Semantic description of the field. Used in three places:

1. Helper text rendered below the field input in the admin form UI.
2. As the Zod .meta({ description }) value for form validation.
3. As the JSDoc comment on the generated document interface property.

To write a separate JSDoc comment, use interfaceDescription in addition.

Inherited from

BaseFieldInput.description

---

format?

optional format?: "hex" | "rgb" | "hsl" | "oklch"

Defined in: packages/core/src/fields/color/types.ts:65

The CSS notation the picker writes.

Validation is deliberately wider than this: every supported notation is accepted on save, so changing format never invalidates existing documents. format governs new writes, not stored history.

Pick the notation the front end consumes. A theme collection feeding CSS custom properties should use "oklch" so values interpolate directly with no conversion step.

Default Value

"hex"

---

index?

optional index?: string

Defined in: packages/core/src/fields/baseTypes.ts:220

Create a database index on this field. The string value becomes the index name in Convex.

Example

slug: { type: "text", index: "by_slug", required: true }
// Generates: .index("by_slug", ["slug"])

Inherited from

BaseFieldInput.index

---

interfaceDescription?

optional interfaceDescription?: string

Defined in: packages/core/src/fields/baseTypes.ts:196

The JSDoc comment on the generated document interface property

Inherited from

BaseFieldInput.interfaceDescription

---

label?

optional label?: string

Defined in: packages/core/src/fields/baseTypes.ts:185

Display label for the field in the admin form.

Inherited from

BaseFieldInput.label

---

meta?

optional meta?: TFieldMeta

Defined in: packages/core/src/fields/baseTypes.ts:221

Inherited from

BaseFieldInput.meta

---

required?

optional required?: boolean

Defined in: packages/core/src/fields/baseTypes.ts:202

Whether this field is required.

Default: false

Inherited from

BaseFieldInput.required

---

themeColors?

optional themeColors?: boolean

Defined in: packages/core/src/fields/color/types.ts:78

When true, the picker gains a Theme tab listing the CSS custom properties declared by the host application’s stylesheet, and selecting one stores a var(--token) reference instead of a literal colour.

The admin panel renders inside the host app, so those tokens are the site’s own tokens. Leave this false on the fields that define the tokens: a field whose value is written back out as --primary: var(--primary) is a custom-property cycle, which CSS discards at computed-value time.

Default Value

false