Fields

Reusable Payload v3 fields that look and behave native. Color picker, icon picker, encrypted fields, unit-aware measurement fields, and a phone number field in one package.

@10x-media/fields is a library of drop-in fields for Payload v3. Each field is built from @payloadcms/ui primitives on Payload design tokens: the same 40px input rows, the same label/error/description composition, the same admin prop contract (description, placeholder, className, readOnly, condition, width, component overrides, RTL). Rendered next to native fields, they are indistinguishable.

collections/Posts.ts

import { colorField } from '@10x-media/fields/color'
import { iconField } from '@10x-media/fields/icon'
import { encryptedField } from '@10x-media/fields/encrypted'

fields: [
  colorField({ name: 'accent' }),
  iconField({ name: 'icon' }),
  ...encryptedField({ name: 'apiToken', type: 'text' }),
]

encryptedField returns an array (the stored field, plus a blind-index sibling when queryable), so spread it into fields. colorField and iconField return a single field.

Five field families

Color

A full picker in a constant-height row: saturation area, hue and alpha sliders, eyedropper, presets, any CSS color as input, one stored format.

Icon

A searchable icon browser over pluggable libraries (Lucide, Radix, Tabler first-party), with per-icon lazy loading and frontend renderers.

Encrypted

Authenticated field-level encryption at rest for twelve field types, with key rotation, opt-in exact-match querying, and masked admin UX.

Measurement

A number field storing one canonical unit while each viewer edits and reads in their own, with locale detection and compound units like feet-and-inches.

Phone number

A country-aware phone number field with a searchable picker, live formatting, and validation and metadata sized to the install.

One package, isolated bundles

Every family lives behind its own subpath export (/color, /icon, /encrypted, /measurement, /phone, plus /color/utils, /icon/react, /icon/codegen, /measurement/utils, /phone/utils). Importing one family never pulls another into your bundle, icon datasets load lazily and only in the admin, and the encrypted machinery is server-only code that never enters a client bundle. These are tested invariants, enforced on the built output in CI.

Plugin optional

Every factory works standalone with inline options. The fields() plugin is an optional layer for app-wide defaults (shared color presets, registered icon libraries, encryption keys) that individual fields inherit and can override:

payload.config.ts

import { fields } from '@10x-media/fields'
import { lucideAdapter } from '@10x-media/fields/icon/adapters/lucide'

plugins: [
  fields({
    color: { presets: ['#0f172a', '#3b82f6', '#22c55e'] },
    icon: { adapters: [lucideAdapter()] },
  }),
]

Start with the quick start. Building your own field in the same style? See Building your own.