Slug

A slug input field

• Since 3.6.0
• 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

How to use in templates/snippets

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

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

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: _