URL Input — Input Controls

Minimal Example

{
  "id": "website",
  "type": "url",
  "label": "Website",
  "width": "half",
  "binding": {
    "source": "$json",
    "path": "company.website"
  }
}

Settings Reference

Setting	Type	Default	Description
`placeholder`	string	—	Placeholder text (e.g., `https://example.com`)
`allowedSchemes`	string[]	`["https","http"]`	Accepted URL schemes/protocols
`requireHttps`	boolean	false	Reject `http://` URLs; only allow `https://`
`showLinkPreview`	boolean	false	Show a clickable open-in-new-tab icon alongside the URL in edit mode
`openInNewTab`	boolean	true	Whether the view-mode link opens in a new tab
`maxLength`	number	2048	Maximum URL character length
`showIcon`	boolean	true	Show link icon inside input prefix

Built-in Format Validation

The URL control validates format automatically on blur. The validation checks:

Starts with an allowed scheme (default: https:// or http://)
Contains a valid hostname with at least one dot
Does not contain spaces
Total length within maxLength

// Format validation is automatic. Just mark it required if needed:
{
  "id": "api-endpoint",
  "type": "url",
  "label": "API Endpoint",
  "validation": {
    "required": true
  },
  "settings": {
    "requireHttps": true,
    "placeholder": "https://api.yourservice.com"
  }
}

Allowing Custom Schemes

For applications that use non-HTTP URLs (e.g., deep links, internal tools, FTP):

{
  "id": "resource-link",
  "type": "url",
  "label": "Resource Link",
  "settings": {
    "allowedSchemes": ["https", "http", "ftp", "sftp", "myapp"],
    "placeholder": "https:// or myapp://"
  }
}

HTTPS-Only Mode

For security-sensitive links (e.g., webhook endpoints, callback URLs):

{
  "id": "webhook-url",
  "type": "url",
  "label": "Webhook URL",
  "description": "Must use HTTPS for security",
  "settings": {
    "requireHttps": true,
    "placeholder": "https://your-server.com/webhook"
  },
  "validation": {
    "required": true
  }
}

// Error shown for http://: "URL must use HTTPS"

View Mode Rendering

In view and preview modes, URLs are rendered as clickable links. The link text is the URL itself (truncated with ellipsis if too long):

// In view mode, rendered as:
// <a href="https://example.com" target="_blank" rel="noopener noreferrer">
//   https://example.com
// </a>

Security: rel="noopener noreferrer" All view-mode URL links include rel="noopener noreferrer" automatically. This prevents the linked page from accessing the opener window via window.opener, protecting against reverse tabnapping attacks.

Link Preview in Edit Mode

Set showLinkPreview: true to display an open-in-new-tab icon button next to the URL field in edit mode. This lets form authors verify that a URL they enter is reachable before saving:

{
  "id": "documentation-url",
  "type": "url",
  "label": "Documentation URL",
  "settings": {
    "showLinkPreview": true,
    "openInNewTab": true,
    "placeholder": "https://docs.example.com"
  }
}

Full Example — Integration Settings Form

{
  "id": "base-url",
  "type": "url",
  "label": "Base API URL",
  "description": "The root URL of your API. All endpoints are relative to this.",
  "required": true,
  "width": "full",
  "order": 1,
  "settings": {
    "requireHttps": true,
    "showLinkPreview": true,
    "placeholder": "https://api.example.com/v1"
  },
  "validation": {
    "required": true
  },
  "binding": {
    "source": "$json",
    "path": "integration.baseUrl"
  }
},
{
  "id": "callback-url",
  "type": "url",
  "label": "OAuth Callback URL",
  "width": "full",
  "order": 2,
  "settings": {
    "requireHttps": true,
    "placeholder": "https://yourapp.com/auth/callback"
  },
  "binding": {
    "source": "$json",
    "path": "integration.callbackUrl"
  }
}

← Password Input Next: Date Picker →