# Link

Use the link field to create links to external URLs, internal pages, files, email addresses and telephone numbers. The link field is also used in the link dialogs of the writer and textarea fields.

****

- Read more: <https://getkirby.com/docs/guide/blueprints/fields>
- Source: <https://github.com/getkirby/kirby/tree/5.5.3/config/fields/link.php>

****

<figure class="image"><a data-lightbox href="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/90382df15e-1717846665/link.png?width=1416&amp;height=328&amp;enlarge=0"><img alt="" class="rounded" height="214" loading="lazy" sizes="auto" src="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/90382df15e-1717846665/link.png?width=924&amp;height=214&amp;enlarge=0" srcset="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/90382df15e-1717846665/link.png?width=462&amp;height=107&amp;enlarge=0 462w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/90382df15e-1717846665/link.png?width=690&amp;height=160&amp;enlarge=0 690w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/90382df15e-1717846665/link.png?width=924&amp;height=214&amp;enlarge=0 924w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/90382df15e-1717846665/link.png?width=1380&amp;height=320&amp;enlarge=0 1380w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/90382df15e-1717846665/link.png?width=1416&amp;height=328&amp;enlarge=0 1848w" width="924"></a></figure>

## Field properties



<div class="table">
	<table class="parameters">
		<thead>
			<tr>
				<th>Name</th>
				<th>Type</th>
				<th>Default</th>

								<th>Description</th>
							</tr>
		</thead>
		<tbody>
						<tr>
				<td>
					autofocus				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Sets the focus on this field when the form loads. Only the first field with this label gets</td>
							</tr>
						<tr>
				<td>
					default				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Default value for the field, which will be used when a page/file/user is created</td>
							</tr>
						<tr>
				<td>
					disabled				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>If <code class="type type-bool">true</code>, the field is no longer editable and will not be saved</td>
							</tr>
						<tr>
				<td>
					help				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Optional help text below the field</td>
							</tr>
						<tr>
				<td>
					label				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The field label can be set as string or associative array with translations</td>
							</tr>
						<tr>
				<td>
					options				</td>
				<td><code class="type type-array">array</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td></td>
							</tr>
						<tr>
				<td>
					required				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>If <code class="type type-bool">true</code>, the field has to be filled in correctly to be saved.</td>
							</tr>
						<tr>
				<td>
					translate				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>true</code>
									</td>

								<td>If <code class="type type-bool">false</code>, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.</td>
							</tr>
						<tr>
				<td>
					when				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Conditions when the field will be shown (since 3.1.0)</td>
							</tr>
						<tr>
				<td>
					width				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>'1/1'</code>
									</td>

								<td>The width of the field in the field grid, e.g. <code class="type">1/1</code>, <code class="type">1/2</code>, <code class="type">1/3</code>, <code class="type">1/4</code>, <code class="type">2/3</code>, <code class="type">3/4</code></td>
							</tr>
					</tbody>
	</table>
</div>

## Example

```yaml
fields:
  link:
    type: link
```

## Available link types

- `url`
- `page`
- `file`
- `email`
- `tel`
- `anchor`
- `custom`

<info>
The `custom` link type is not enabled by default as it cannot validate the entered URL. See the <a href="#custom-link-type">section on the custom link type below</a> for more.
</info>

## Link to pages

<figure class="image"><a data-lightbox href="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/193651d6aa-1717846665/page-link.png?width=727&amp;height=650&amp;enlarge=0"><img alt="" class="rounded" height="650" loading="lazy" sizes="auto" src="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/193651d6aa-1717846665/page-link.png?width=727&amp;height=650&amp;enlarge=0" srcset="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/193651d6aa-1717846665/page-link.png?width=462&amp;height=413&amp;enlarge=0 462w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/193651d6aa-1717846665/page-link.png?width=690&amp;height=617&amp;enlarge=0 690w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/193651d6aa-1717846665/page-link.png?width=727&amp;height=650&amp;enlarge=0 924w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/193651d6aa-1717846665/page-link.png?width=727&amp;height=650&amp;enlarge=0 1380w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/193651d6aa-1717846665/page-link.png?width=727&amp;height=650&amp;enlarge=0 1848w" width="727"></a></figure>

If an icon has been defined in the page's blueprint, it will be used in the page selector.

## Link to files

<figure class="image"><a data-lightbox href="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/6e37643953-1717846665/file-link.png?width=1374&amp;height=1342&amp;enlarge=0"><img alt="" class="rounded" height="902" loading="lazy" sizes="auto" src="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/6e37643953-1717846665/file-link.png?width=924&amp;height=902&amp;enlarge=0" srcset="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/6e37643953-1717846665/file-link.png?width=462&amp;height=451&amp;enlarge=0 462w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/6e37643953-1717846665/file-link.png?width=690&amp;height=674&amp;enlarge=0 690w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/6e37643953-1717846665/file-link.png?width=924&amp;height=902&amp;enlarge=0 924w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/6e37643953-1717846665/file-link.png?width=1374&amp;height=1342&amp;enlarge=0 1380w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/link/6e37643953-1717846665/file-link.png?width=1374&amp;height=1342&amp;enlarge=0 1848w" width="924"></a></figure>

## Custom link type

The `custom` link type allows to enter arbitrary links, e.g. relative links or deeplinks to external apps with custom protocols.

Because of its flexibility, Kirby cannot know whether the entered link is valid and safe. It is therefore your responsibility to check if the link conforms to the format for your use case.

<alert>
Using the `custom` link type without additional validation or sanitization can lead to security attacks such as cross-site scripting (XSS). Only enable this link type if you have adequate protections in place or if such protections are not needed in your use case.
</alert>

## Customize allowed link types

With the `options` property you can customize the link types offered by the field:

```yaml
fields:
  link:
    type: link
    options:
      - page
      - anchor
```

## Use in templates/snippets

Use the `toUrl()` method to convert any type of link to a valid URL:

```php
<a href="<?= $page->link()->toUrl() ?>"><?= $page->link() ?></a>
```

## Adding target, link text etc.

The link field does one job and one job only: It stores a link. If you need additional metadata such as a target, link text, class names etc., you can wrap the link field within an object field:

```yaml
fields:
  linkObject:
    type: object
    fields:
      link:
        type: link
      linkText:
         type: text
      target:
        type: toggle
        text: Open in new window?
      classnames:
         type: text
```

Then create a snippet that you can re-use across your site for all such wrapped link fields. Here is a basic example for you to extend according to your requirements:

```php
<?php $linkObject = $page->linkObject()->toObject(); ?>
<a
    href="<?= $linkObject->link()->toUrl() ?>"
    <?= $linkObject->target()->toBool() === true ? 'target="_blank"' : '' ?>
    <?= $linkObject->classnames()->isNotEmpty() ? 'class="' . $linkObject->classnames() . '"' : '' ?>
>
  <?= $linkObject->linkText()->or($linkObject->link()) ?>
</a>
```