Settings Field

A small helper that lets you bundle multiple true‑/false design toggles into one hasMany select field instead of scattering separate checkbox fields across your schema.

Install

pnpm dlx [email protected] add https://p.livog.com/r/settings-field.json

Code

import type { SelectField } from 'payload'

export function settingsField(overrides: Partial<SelectField> = {}): SelectField {
  const { admin: adminOverrides = {}, ...restOverrides } = overrides

  return {
    type: 'select',
    name: 'settings',
    label: 'Settings',
    hasMany: true,
    options: [],
    admin: {
      width: '25%',
      ...adminOverrides
    },
    ...restOverrides
  } as SelectField
}

Usage

import { settingsField } from '@/payload/fields/settings'

export const Section: CollectionConfig = {
  slug: 'sections',
  fields: [
    settingsField({
      options: [
        { label: 'Transition', value: 'transition' },
        { label: 'No bottom spacing', value: 'noSectionSpacingBottom' },
        { label: 'No top spacing', value: 'noSectionSpacingTop' },
        { label: 'Centered', value: 'centered' },
        { label: 'Invert BG image in dark mode', value: 'invertBackgroundImageInDarkMode' }
      ]
    }),

    // …other fields
  ]
}

In your component you can simply check:

if (settings?.includes('transition')) {
  // do something
}

When to use

You have several on/off design toggles (e.g. transition, centered, noSectionSpacingTop) and don’t want a separate boolean field for each one.
You expect the list of options to change over time and would rather tweak the options array than run schema migrations.
You prefer a compact Admin UI that groups related toggles into a single field.