URL

A website/link input that uses the browser's native type="url" input. It brings up the correct keyboard on mobile and supports built-in URL format validation.

Schema Example

urljson

{
  id: "website",
  type: "url",
  label: "Your website",
  placeholder: "https://example.com",
  required: true
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
placeholder	string	Placeholder text. Defaults to `https://example.com`.
required	boolean	Whether the field must be filled in.
defaultValue	string	Pre-filled default URL value.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Validation rules. Use the built-in `"url"` rule to enforce a valid http/https URL.

With Validation

URL with validationjson

{
  id: "portfolio",
  type: "url",
  label: "Portfolio URL",
  placeholder: "https://yoursite.com",
  required: true,
  validation: [
    { type: "url", message: "Please enter a valid https:// URL" }
  ]
}

Answer Format

Returns a string containing the URL value (e.g. "https://example.com").

Practical Example

Advanced Example

A developer profile form collecting website and social links:

Developer profile formtsx

import { SurveyRenderer } from 'react-minimal-survey-builder';
import type { SurveySchema } from 'react-minimal-survey-builder';

const profileSchema: SurveySchema = {
  id: 'dev-profile',
  title: 'Developer Profile',
  pages: [
    {
      id: 'links',
      questions: [
        {
          id: 'name',
          type: 'text',
          label: 'Full name',
          required: true,
        },
        {
          id: 'website',
          type: 'url',
          label: 'Personal website',
          placeholder: 'https://yoursite.com',
          validation: [{ type: 'url', message: 'Must be a valid URL' }],
        },
        {
          id: 'github',
          type: 'url',
          label: 'GitHub profile',
          placeholder: 'https://github.com/username',
          validation: [{ type: 'url', message: 'Must be a valid URL' }],
        },
        {
          id: 'linkedin',
          type: 'url',
          label: 'LinkedIn profile',
          placeholder: 'https://linkedin.com/in/username',
        },
      ],
    },
  ],
  settings: { submitText: 'Save Profile' },
};

function DevProfileForm() {
  return (
    <SurveyRenderer
      schema={profileSchema}
      onSubmit={(answers) => console.log('Profile saved:', answers)}
    />
  );
}