# Slug A slug input field **** - Read more: - Source: **** 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 ```yaml 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: ```yaml 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: ```yaml 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: ```yaml 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: ```yaml 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. ```yaml fields: identifier: label: Identifier type: slug wizard: field: input text: Generate! ```
## How to use in templates/snippets ```php
```