Slug

A slug input field

• Read the guide

The slug field creates a text input that automatically sanitizes the typed value with our built-in sluggify method. It's perfect if you want to create IDs or class names for HTML elements or paths for files or URLs.

Example

fields:
  className:
    label: Class
    type: slug

Field properties

Name	Type	Default	Description
after		–	Optional text that will be shown after the input
allow	string		Set of characters allowed in the slug
autofocus	bool	–	Sets the focus on this field when the form loads. Only the first field with this label gets
before		–	Optional text that will be shown before the input
default		–	Default value for the field, which will be used when a page/file/user is created
disabled	bool	–	If true, the field is no longer editable and will not be saved
help		–	Optional help text below the field
icon	string	url	Changes the link icon
label		–	The field label can be set as string or associative array with translations
maxlength	int	–	Maximum number of allowed characters
minlength	int	–	Minimum number of required characters
path	string	–	Set prefix for the help text
pattern	string	–	A regular expression, which will be used to validate the input
placeholder		–	Optional placeholder value that will be shown when the field is empty
required	bool	–	If true, the field has to be filled in correctly to be saved.
sync	string	–	Name of another field that should be used to automatically update this field's value
translate	bool	true	If false, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.
when		–	Conditions when the field will be shown (since 3.1.0)
width	string	1/1	The width of the field in the field grid. Available widths: 1/1, 1/2, 1/3, 1/4, 2/3, 3/4
wizard		false	Set to object with keys field and text to add button to generate from another field

Sync option

You can sync the slug field with another field. Whenever the editor types something into the synced field, the slug field will update with a sluggified version of the input:

fields:
  className:
    label: Class Name
    type: slug
    sync: title

Please note that when your field to sync uses camelCase, you still have to reference the field with all lowercase letters:

fields:
  sectionHeadline:
    type: text
  id:
    label: Id
    type: slug
    sync: sectionheadline

The same applies for the wizard option below.

Wizard option

If you don't want to automatically sync the slug field with the other field, you can also to do this manually when you click a button. The wizard option accepts a field to sync with and a text attribute for the button text.

fields:
  identifier:
    label: Identifier
    type: slug
    wizard:
      field: input
      text: Generate!

Allow option

By default, the slug field will strip out or replace any non-alphabetic, non-numeric character with a simple dash. You can define additional allowed characters with the allow option:

fields:
  className:
    label: Class Name
    type: slug
    sync: title
    allow: _

The slug field also works within blocks or structure field items to sync fields within a block/structure field item.

fields:
  structure:
  type: structure
  fields:
    text:
      type: text
    slug:
      type: slug
      sync: text

How to use in templates/snippets

<div class="<?= $page->className() ?>">
    <!-- -->
</div>