Content Field

Link field

The link field allows editors to create a link to another element or an external url.

myLinkField:
  type: link

This field definition creates the following input in the control panel:

A link field in the control panel

Attributes

Property Description
allowNewWindow Whether the option top open links in new a new window should be shown. Defaults to true.
group Starts a new field group.
instructions Additional instructions for this field in the control panel. Will be shown beneath the field label.
label The primary `label` of the input field in the control panel. When omitted, a label will be generated from the name of the field.
linkTypes Defines the available link types. By default this contains definitions for url, mail, entry and asset links.
rules The validation rules of the field.
width The width of the field in the control panel.

allowNewWindow

Whether the option top open links in new a new window should be shown. Defaults to true.

allowNewWindow: false

linkTypes

Defines the available link types. By default this contains definitions for url, mail, entry and asset links. This value must be an object, the keys define the internal link names and the values must contain the link definitions.

linkTypes:
  url:
    type: input
    inputType: url
    label: Url
  entry:
    type: element
    elementType: craft\elements\Entry
    label: Entry

There are two types of supported link input methods: element and input. All definitions must contain the following attributes:

Property Description
type element
label The label of the link type displayed in the dropdown.
elementType The fully qualified name of the element class.
Property Description
type input
label The label of the link type displayed in the dropdown.
inputType The html input type displayed to the user, e.g. text, url or mail.

Defining the link types can be a tedious task. Remember that you can define reusabe field definitions, see :doc:../advanced/reusable-fields.

Templating

You can access the url of the linked field by outputting it.

label: Link field demo
fields:
  linkField: link
---
<a href="{{ linkField }}">Read more</a>

You can use the linkAttributes helper to quickly retrieve all anchor element attributes.

<a{{ linkField.linkAttributes }}>Read more</a>

The linkAttributes helper accepts additional attributes:

<a{{ linkField.linkAttributes({
  class: 'myLinkClass'
}) }}>Read more</a>

You can check for element links using hasLinkedElement and retrieve linked elements using linkedElement:

{% if linkField.hasLinkedElement %}
  {{ linkField.linkedElement.title }}
{% endif %}

← Location field →