Statamic Field Actions: Make the CP Yours

I slept on Field Actions for way too long. If you build sites in Statamic and haven’t played with them yet, you’re missing out.

Short version: Field Actions let you attach tiny JavaScript “utilities” to any field in the Publish form—things like “slugify this,” “uppercase that,” or “copy from another field.” They show up in the field header menu (and can even be one-click “quick” buttons). No addon scaffolding. No custom fieldtype. Just a few lines of JS.

Default actions of the Bard field. — Default actions of the Bard field

Here’s why this is such a big deal:

Actions attach to fieldtypes (e.g., text, slug, Bard set, Replicator set), so you can enhance existing fields.
You choose exactly where they appear with visible(payload)—so you don’t accidentally enable an action on every field of that type.
The action callback gets a rich payload (current value, update() setter, config, meta, store, etc.), which means you can read anything inside the entry and update content.
Mark an action as quick and give it an icon to add a handy one-click button in the field header.

A dead-simple example: “Slugify from Title”

Statamic can slugify on save, but if your slug field still has spaces, you’ll hit a validation error and need to clean it up first. That gets tedious when duplicating entries. This action saves time, and it’s so satisfying to fix the slug with just one click.

1) The tiny utility

/**
 * Slugify a string.
 *
 * @param {string} input - The input string.
 * @returns {string} - The slugified string.
 *
 * @see https://github.com/statamic/cms/blob/5.x/resources/js/bootstrap/globals.js /
 */
export function slugify(input) {
  if (!input) return ''
 
  return Statamic.$slug.create(input)
}

/**
 * Slugify a string.
 *
 * @param {string} input - The input string.
 * @returns {string} - The slugified string.
 *
 * @see dd3d0b97-1fec-4ecd-a623-0e79b49e71f0 /
 */
export function slugify(input) {
  if (!input) return ''

  return Statamic.$slug.create(input)
}js

You can put this in a separate JS file to be reused throughout your project. In Bedrock it lives in js/lib/utils.js

2) The Field Action

// resources/js/components/actions/slugify.js
import { slugify } from '../../lib/utils.js'
 
export default {
  title: 'Slugify',
  quick: true,
  icon: 'regular/text-small',
  run: ({ update, store, storeName }) => {
    const values = store.state.publish[storeName].values
    update(slugify(values.title))
  },
}

// resources/js/components/actions/slugify.js
import { slugify } from '../../lib/utils.js'

export default {
  title: 'Slugify',
  quick: true,
  icon: 'regular/text-small',
  run: ({ update, store, storeName }) => {
    const values = store.state.publish[storeName].values
    update(slugify(values.title))
  },
}js

What’s going on:

store/storeName let us pull values.title from the same Publish form.
update() writes the new slug back into the field.

3) Register it

Make sure your Control Panel JS is loaded via Vite, then add the action:

// resources/js/cp.js
import slugifyAction from './components/actions/slugify.js'
 
Statamic.booting(() => {
  // Quickly sync slug with the title field
  Statamic.$fieldActions.add('slug-fieldtype', slugifyAction)
})

// resources/js/cp.js
import slugifyAction from './components/actions/slugify.js'

Statamic.booting(() => {
  // Quickly sync slug with the title field
  Statamic.$fieldActions.add('slug-fieldtype', slugifyAction)
})js

Now duplicate an entry, change the Title, click the Slugify action in the slug field’s header—done.

Built-in slug action

Just after writing this post and playing around with the Slug fieldtype I discovered that Statamic has a built-in Regenerate slug action that is disabled by default.

Here is how to enable it: click the “…” actions button inside your entry (near Save & Publish) and select Edit Blueprint. Go to the Sidebar tab and open the Slug field. You’ll see options to enable the regenerate button.

Or just add show_regenerate: true to the slug field config in your blueprint.

 -
   handle: slug
   field:
     type: slug
+    show_regenerate: true 

-
  handle: slug
  field:
    type: slug
    show_regenerate: trueyaml

Useful patterns

Quick one-click actions

{ quick: true, icon: 'light/bolt' }

{ quick: true, icon: 'light/bolt' }js

Adds a clickable icon next to the field label. You can compute icon or quick based on the payload.

Show only in specific places

visible: ({ handle }) => handle === 'field_handle'

visible: ({ handle }) => handle === 'field_handle'js

Keep the UI clean by scoping where it appears.

Long-running tasks with a spinner

run: () => new Promise((resolve) => { doAsync(); resolve() })

run: () => new Promise((resolve) => { doAsync(); resolve() })js

Returning a Promise toggles a built-in loading state.

Add confirmation modal

confirm: true

confirm: truejs

You can write custom title and text and may even add input fields.

Add inside Bard/Replicator sets

Register on 'bard-fieldtype-set' or 'replicator-fieldtype-set', then use values/update('fieldHandle', newValue) to target sibling fields in the set.

A few more handy action ideas

Generate SEO description: pull Bard content, send a short prompt to OpenAI API to draft a meta description. You can use a confirmation modal and include an input so editors can provide a custom prompt before generating.

Append/prepend patterns: for sandbox entries: update('DRAFT-' + value)
“Fix alt text” on Assets: read other fields and set a better default alt
Generate a table of contents: scan Bard headings, build the list, and let editors exclude items or override anchor text. (I built this for a client who needed more control.)

All use the same building blocks: visible, value, update, and (when needed) store.values.

Quick setup checks

If nothing shows up, confirm your CP assets are actually loaded via Vite and your cp.js is registered.
Use the correct target when registering: 'text-fieldtype', 'slug-fieldtype', 'bard-fieldtype-set', or 'replicator-fieldtype-set'. The action then appears in the field header dropdown (and as a quick icon if enabled).

Make the CP yours

If you take one thing from this post: Field Actions are the fastest way to make Statamic feel tailor-made for your team.

Next step: talk to the people who live in the CP—editors, marketers, anyone publishing. What chores do they repeat in the CP? What’s tedious when writing/formatting content? What would they prefer to automate? You’ll uncover useful cases and make your editors’ lives easier.

The Statamic Feature Hiding in Plain Sight: Field Actions