Slug
A slug input field
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 | mixed |
null
|
Optional text that will be shown after the input |
$allow | string |
''
|
Set of characters allowed in the slug |
$autofocus | bool |
null
|
Sets the focus on this field when the form loads. Only the first field with this label gets |
$before | mixed |
null
|
Optional text that will be shown before the input |
$default | mixed |
null
|
Default value for the field, which will be used when a page/file/user is created |
$disabled | bool |
null
|
If true , the field is no longer editable and will not be saved |
$font | string |
null
|
Sets the font family (sans or monospace) |
$help | mixed |
null
|
Optional help text below the field |
$icon | string |
'url'
|
Changes the link icon |
$label | mixed |
null
|
The field label can be set as string or associative array with translations |
$maxlength | int |
null
|
Maximum number of allowed characters |
$minlength | int |
null
|
Minimum number of required characters |
$path | string |
null
|
Set prefix for the help text |
$pattern | string |
null
|
A regular expression, which will be used to validate the input |
$placeholder | mixed |
null
|
Optional placeholder value that will be shown when the field is empty |
$required | bool |
null
|
If true , the field has to be filled in correctly to be saved. |
$sync | string |
null
|
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 | mixed |
null
|
Conditions when the field will be shown (since 3.1.0) |
$width | string |
'1/1'
|
The width of the field in the field grid, e.g. 1/1 , 1/2 , 1/3 , 1/4 , 2/3 , 3/4
|
$wizard | mixed |
false
|
Set to object with keys field and text to add button to generate from another field |
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 a custom set of allowed characters with the allow
option:
fields:
className:
label: Class Name
type: slug
sync: title
allow: a-z_
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.
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
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!

How to use in templates/snippets
<div class="<?= $page->className() ?>">
<!-- -->
</div>