Skip to content

Kirby 5.1.3

    Search by Algolia

    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>