Skip to content

Kirby 3.8.4

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