Skip to content

Kirby 4.1.2

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 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
font string Sets the font family (sans or monospace)
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>