Url

A url field holds a link to an external resource: a website, a mailto: or tel: link, a social profile. Editors enter the url, an optional title and whether it opens in a new tab. For links that can also point to pages in the CMS, use the Link field.

import {Field} from 'alinea'

Field.url('Website')

Field.url.multiple('Social profiles', {max: 5})

Options

fields: extra fields stored on each link, such as a label or an icon choice. Pass an object of fields or a type.
max (multiple only): the maximum number of links.
The common options help, width, inline, initialValue, required, validate, readOnly, hidden and shared.

Value

Each link is resolved to {url, href, title, target, fields}: url and href both hold the url as entered, target is '_blank' when the editor chose a new tab and '_self' otherwise, and fields holds your extra fields. A single url field is null while it's empty, a multiple one is an array.

import type {UrlLink} from 'alinea'

export function ExternalLink({link}: {link: UrlLink | null}) {
  if (!link?.href) return null
  return (
    <a
      href={link.href}
      target={link.target || undefined}
      rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
    >
      {link.title || link.href}
    </a>
  )
}

The picker only checks that the url can be parsed, so relative urls such as /contact are accepted too. Add a validate function if you need a specific format, for example urls that start with https://.