URL

A string which represents a URL.

Properties

REQUIREDtypestring
Value must be set to url.
REQUIREDnamestring
Required. The field name. This will be the key in the data record.
titlestring
Human readable label for the field.
hiddenboolean | function
If set to true, this field will be hidden in the studio. You can also return a callback function to use it as a conditional field.
readOnlyboolean | function
If set to true, this field will not be editable in the content studio. You can also return a callback function to use it as a conditional field.
descriptionstring
Short description to editors how the field is to be used.
initialValueURLStringOrResolverFunction
The initial value that will be used when using this type to create new values. Can be either the literal value or a resolver function that returns either the literal value or a promise that resolves to the initial value.

uri(options)function
scheme - String, RegExp or Array of schemes to allow (default: ['http', 'https']).
allowRelative - Whether or not to allow relative URLs (default: false).
relativeOnly - Whether to only allow relative URLs (default: false).
custom(fn)function
Creates a custom validation rule.

The URL type is basically just a string input, but the rendered HTML input field will have the type attribute set to url, like so:

<input type="url">

{
  title: 'Image URL',
  name: 'imageUrl',
  type: 'url'
}

{"imageUrl": "https://example.com/img.jpg"}

To allow more protocols than http/https, you can specify validation options:

{
  title: 'Link',
  name: 'href',
  type: 'url',
  validation: Rule => Rule.uri({
    scheme: ['http', 'https', 'mailto', 'tel']
  })
}

Updated on December 8, 2021