Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Slug Field

A slug is a unique, indexed, URL-friendly string that identifies a particular document, often used to construct the URL of a webpage.

The Slug Field auto-generates its value from another field, such as a title or name field, and provides UI to lock and unlock the field to protect its value, as well as to re-generate the slug on-demand.

To create a Slug Field, set the type to slug in your Field Config:

1
import type { CollectionConfig } from 'payload'
2
3
export const ExampleCollection: CollectionConfig = {
4
// ...
5
fields: [
6
// ...
7
8
{ name: 'slug', type: 'slug', useAsSlug: 'title' },
9
10
],
11
}

Config Options

The Slug Field defaults required, unique, and index to true, and renders in the sidebar. In addition to the standard field options, it exposes:

Option

Description

useAsSlug

Optional. The name of the top-level field to generate the slug from (e.g. 'title'). This field must exist in the same collection.

slugify

Optional. Override the default slugify function. More details.

Because slug is a standard named field, customize it with the usual field properties directly — label, localized, required, unique (set false to drop the unique index, e.g. for a per-tenant compound index), index, defaultValue, and admin (including admin.position).

Generation

The slug is static: it fills once while empty and is preserved thereafter, so editing the source field later never rewrites it — this protects live URLs from changing unexpectedly.

  • On create, an empty slug is derived from the useAsSlug source field, if any. With no source value (or no useAsSlug configured), it falls back to <singular>-<N>, where N is the first available integer (e.g. posts-1). The slug is therefore always present the moment the document is created.
  • An explicit value always wins and is normalized through slugify (e.g. Hello World → hello-world). It must be unique — a collision is rejected rather than silently changed.
  • Once set, the slug is never regenerated automatically. Editors can unlock the field to edit it directly, or re-generate it on-demand from the Admin Panel.
  • Generated values are deduped against existing documents so two never claim the same slug.

Because the slug is guaranteed to exist on create, autosave-enabled documents get a stable slug on the initial draft — before a title is typed — which live preview needs to load the document by its slug.

Localization

A localized slug is unique per locale: the same value can be reused across a document's own locales, but not across documents within one locale. Every locale is seeded on create, so switching locales never lands on a blank slug, and generation is locale-aware when the source is localized.

Custom Slugify Function

You can override the default slugify function of the Slug Field. This is necessary if the slug requires special treatment, such as character encoding, additional language support, etc.

This function receives the value of the useAsSlug field as valueToSlugify and must return a string.

For example, if you wanted to use the slugify package, you could do something like this:

1
import type { CollectionConfig } from 'payload'
2
import slugify from 'slugify'
3
4
export const MyCollection: CollectionConfig = {
5
// ...
6
fields: [
7
// ...
8
{
9
name: 'slug',
10
type: 'slug',
11
useAsSlug: 'title',
12
slugify: ({ valueToSlugify }) =>
13
slugify(valueToSlugify, {
14
// ...additional `slugify` options here
15
}),
16
},
17
],
18
}

The following args are provided to the custom slugify function:

Argument

Type

Description

valueToSlugify

string

The value of the field specified in useAsSlug.

data

object

The full document data being saved.

req

PayloadRequest

The Payload request object.

Was this page helpful?

Next

Tabs Field