diff --git a/99 Daily/2026-05-15.md b/99 Daily/2026-05-15.md index edcade1..179d128 100644 --- a/99 Daily/2026-05-15.md +++ b/99 Daily/2026-05-15.md @@ -74,3 +74,4 @@ tags: [daily] - 14:43 — session ended | `Shumiland` - 15:29 (4min) — session ended | `ai_leed` - 15:31 — session ended | `ai_leed` +- 15:33 — session ended | `ai_leed` diff --git a/raw/fields__radio.md b/raw/_processed/fields__radio.md similarity index 100% rename from raw/fields__radio.md rename to raw/_processed/fields__radio.md diff --git a/wiki/_master-index.md b/wiki/_master-index.md index 4297003..efee5f4 100644 --- a/wiki/_master-index.md +++ b/wiki/_master-index.md @@ -35,7 +35,7 @@ This 3-hop pattern works for hundreds of articles without vector search. | [[wiki/reports/_index\|reports/]] | Weekly and monthly summaries — generate: `uv run python scripts/report-generator.py --weekly` | 1 | | [[wiki/infrastructure/_index\|infrastructure/]] | Server inventory: all 10 SSH hosts — optical, optical-dev, optical-prod, baic, librechat, modocmms, box-cli, aimpress, pve | 12 | | [[wiki/testing/_index\|testing/]] | Web app testing: functional, performance, security, UI types; TDD/BDD/Agile methodologies; Selenium/Cypress/Playwright/JMeter/OWASP ZAP tools | 1 | -| [[wiki/payloadcms/_index\|payloadcms/]] | Full Payload CMS reference — getting started, config, database (Postgres/MongoDB/SQLite), all 22 field types, access control, hooks, authentication (cookies, JWT, API keys, custom strategies, token data), admin UI, custom components, Lexical rich text, live preview, versions/drafts, Local/REST/GraphQL APIs, queries, plugins, jobs queue, upload, ecommerce, production deploy, TypeScript, migration guides, i18n, localization | 75 | +| [[wiki/payloadcms/_index\|payloadcms/]] | Full Payload CMS reference — getting started, config, database (Postgres/MongoDB/SQLite), all 22 field types, access control, hooks, authentication (cookies, JWT, API keys, custom strategies, token data), admin UI, custom components, Lexical rich text, live preview, versions/drafts, Local/REST/GraphQL APIs, queries, plugins, jobs queue, upload, ecommerce, production deploy, TypeScript, migration guides, i18n, localization | 76 | | [[wiki/shared-patterns/_index\|shared-patterns/]] | Oliver Agency standard library patterns: httpx, structlog, pydantic-settings, alembic — reuse before writing from scratch | 4 | | [[wiki/mistakes/_index\|mistakes/]] | Anti-patterns extracted from sessions — per-stack running lists (fastapi, react, docker, postgres, general) — injected at session start | 5 | diff --git a/wiki/payloadcms/_index.md b/wiki/payloadcms/_index.md index 139a8ac..91bd7df 100644 --- a/wiki/payloadcms/_index.md +++ b/wiki/payloadcms/_index.md @@ -76,3 +76,4 @@ | [[wiki/payloadcms/fields-number\|Number Field]] | Numeric field — min/max validation, hasMany array mode, step admin control, unique/index, virtual, custom components | raw/fields__number.md | 2026-05-15 | | [[wiki/payloadcms/fields-overview\|Fields Overview]] | Cross-cutting field config: virtual fields (boolean + path), validation (context, perf, reuse), defaultValue, admin options (condition, disabled, components), custom components (Field/Cell/Filter/Label/Error/Diff), reserved names | raw/fields__overview.md | 2026-05-15 | | [[wiki/payloadcms/fields-point\|Point Field]] | Geospatial coordinate field — `[lng, lat]` storage, 2dsphere index, `near`/`within`/`intersects` query operators; MongoDB + PostgreSQL only (no SQLite) | raw/fields__point.md | 2026-05-15 | +| [[wiki/payloadcms/fields-radio\|Radio Field]] | Single-choice radio group — options constraint (no hyphens, GraphQL enum), horizontal/vertical layout, enumName for Postgres, custom components | raw/fields__radio.md | 2026-05-15 | diff --git a/wiki/payloadcms/fields-radio.md b/wiki/payloadcms/fields-radio.md new file mode 100644 index 0000000..731989a --- /dev/null +++ b/wiki/payloadcms/fields-radio.md @@ -0,0 +1,120 @@ +--- +title: "Radio Field" +aliases: [radio-group-field, payload-radio] +tags: [payloadcms, fields, radio, admin-ui] +sources: [raw/fields__radio.md] +created: 2026-05-15 +updated: 2026-05-15 +--- + +## Overview + +The Radio Field allows selecting **one value** from a predefined set of options. Renders as a radio group in the Admin Panel. + +```ts +import type { Field } from 'payload' + +export const MyRadioField: Field = { + name: 'color', + type: 'radio', + options: [ + { label: 'Mint', value: 'mint' }, + { label: 'Dark Gray', value: 'dark_gray' }, + ], + defaultValue: 'mint', +} +``` + +## Config Options + +| Option | Required | Description | +|--------|----------|-------------| +| `name` | Yes | DB property name | +| `options` | Yes | Array of strings or `{ label, value }` objects | +| `defaultValue` | — | Must match one of the option values | +| `label` | — | Field label in Admin Panel | +| `validate` | — | Custom validation function (runs on client + backend) | +| `index` | — | Add DB index for faster queries | +| `enumName` | — | Custom enum name for Postgres (auto-generated if omitted) | +| `interfaceName` | — | Creates a reusable TypeScript interface + GraphQL type | +| `saveToJWT` | — | Include value in user JWT (top-level auth collections) | +| `localized` | — | Enable per-locale values | +| `required` | — | Field must have a value | +| `hidden` | — | Hidden from all APIs + Admin Panel; still saved to DB | +| `virtual` | — | Exclude from DB (pass `true`) or link to relationship (pass path string) | +| `hooks` | — | Field hooks | +| `access` | — | Field-level access control | +| `admin` | — | Admin-specific options (see below) | +| `custom` | — | Extension point for plugins | +| `typescriptSchema` | — | Override generated TypeScript type with JSON schema | + +## Admin Options + +Inherits all base [[wiki/payloadcms/fields-overview|Field Admin Config]] options, plus: + +| Property | Description | +|----------|-------------| +| `layout` | `'horizontal'` (default) or `'vertical'` — controls radio group orientation | + +```ts +admin: { + layout: 'horizontal', // or 'vertical' +} +``` + +## Option Values — Constraints + +> **Warning:** Option values must be strings **without hyphens or special characters** due to GraphQL enum naming rules. Underscores are allowed. + +- Bad: `'dark-gray'`, `'option.one'` +- Good: `'dark_gray'`, `'option_one'` +- Non-string values or values with special characters will be formatted automatically before use as a GraphQL enum — results may be unexpected. + +## Custom Components + +### Field Component + +**Server:** +```tsx +import { RadioGroupField } from '@payloadcms/ui' +import type { RadioFieldServerComponent } from 'payload' + +export const CustomRadioFieldServer: RadioFieldServerComponent = ({ + clientField, path, schemaPath, permissions, +}) => +``` + +**Client:** +```tsx +'use client' +import { RadioGroupField } from '@payloadcms/ui' +import type { RadioFieldClientComponent } from 'payload' + +export const CustomRadioFieldClient: RadioFieldClientComponent = (props) => + +``` + +### Label Component + +```tsx +import { FieldLabel } from '@payloadcms/ui' +import type { RadioFieldLabelServerComponent } from 'payload' + +export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = ({ + clientField, path, +}) => +``` + +## Key Takeaways + +- Radio stores a **single string value** — use [[wiki/payloadcms/fields-checkbox|Checkbox]] for boolean, [[wiki/payloadcms/fields-basic|Select]] for dropdown multi-select +- `options` can be plain strings or `{ label, value }` objects — prefer objects for i18n labels +- Option values **must not contain hyphens** — GraphQL enum constraint; use underscores instead +- `defaultValue` must be one of the defined option values, not an arbitrary string +- `admin.layout: 'horizontal'` (default) or `'vertical'` controls the visual arrangement +- `enumName` (Postgres) lets you control the generated enum name; auto-generated from `name` otherwise +- `interfaceName` creates a reusable TS interface and GraphQL type — useful for shared option sets + +## Sources + +- `raw/fields__radio.md` — Payload CMS official docs: https://payloadcms.com/docs/fields/radio