---
url: /documentation/input-types/link.md
description: >-
  Use a hybrid link input for post relations or free text, with optional labels,
  new-tab targets, and mode switching.
---

# Link Input

Chose between relation or free text input. Include label or target choice. All in one input.

```js
{
  input: {
    type: 'link', // [!code focus:4]
    labelInput: true,
    targetChoice: true,
    allowFreeText: true
  }
}
```

## Input Options

| Option | Values | Default | Description |
| - | - | - | - |
| `required` | `boolean` | `false` | Whether filling the field is mandatory. |
| `labelInput` | `boolean` | `false` | Show label text input if true. |
| `targetChoice` | `boolean` | `false` | Show target blank checkbox if true. |
| `allowFreeText` | `boolean` | `true` | Allows to switch to plain text mode. |
| `postTypes` | `string[]` | `['page', 'post']` | Define post types of relation. |
| `editLink` | `string \| boolean` | `true` | Declare edit link for individual items, `%s` will be replaced with its post ID. If set to `false`, edit links will be disabled. If set to `true`, a default edit link will be determined automatically. |

## Template Usage

You can use the helper function `wpce_get_link()` to get the link URL from the input value. This function takes care of both modes (relations and free text).

```php
add_filter('wpce_render_example', function ($wpce, $element) {
	$props = $element->properties;

	$target = $props->link->target ? "target=\"_blank\"" : '';
	$link = wpce_get_link($props->link);
	$label = htmlspecialchars($props->link->label);

	return "<a href=\"{$link}\" {$target}>{$label}</a>";
}, 20, 2);
```

Or, if you want to use it conditionally:

```php
// ...

if ($link = wpce_get_link($props->link)) {
	$tag = 'a';
	$attrs['href'] = $link;
	$attrs['target'] = $props->link->target;
}

// ...
```

## Conditions

The `link` input type supports the following conditions for [dynamic visibility](/documentation/concepts/elements/definition#dynamic-visibility):

| Condition | Payload | Description |
| - | - | - |
| `isEmpty` | `boolean`defaults to `true` | Checks whether or not a target has been selected/entered. |
| `hasLabel` | `boolean`defaults to `true` | Checks whether or not a label has been entered. |
| `hasMode` | `'ref' \| 'text'` | Checks whether the input is in reference mode or free text mode. |
| `opensInNewTab` | `boolean`defaults to `true` | Checks whether or not the link opens in a new tab. |
| `hasParams` | `boolean`defaults to `true` | Checks whether or not the link has URL parameters or a hash attached. |