Skip to content

Kirby 4.5.0

    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 – 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>