URL

Single-line text input with URL validation. Use for external links, social media profiles, and any value that should be a valid web address.

Usage#

typescript
website: { label: 'Website', format: 'url' },

Options#

Validation#

Accepted formats:

• https://example.com — HTTPS URLs
• http://example.com — HTTP URLs
• /about — Root-relative paths (must start with /, not //)

The input uses inputMode="url" for mobile keyboard optimization. Values are trimmed on save.

Example: Team member social profiles#

Schema:

typescript
// cms/octocms.config.ts
teamMember: {
  label: 'Team Member',
  hasMany: true,
  fields: {
    name: { label: 'Name', format: 'string', entryTitle: true, required: true },
    linkedin: { label: 'LinkedIn', format: 'url', hint: 'https://linkedin.com/in/...' },
    github: { label: 'GitHub', format: 'url', hint: 'https://github.com/...' },
    website: { label: 'Personal Site', format: 'url' },
  },
},

Query + render:

tsx
// src/app/team/page.tsx
import { query } from 'cms/__generated__/query';

export default async function TeamPage() {
  const members = await query('teamMember').toArray();

  return (
    <ul>
      {members.map((m) => (
        <li key={m.sys.id}>
          <strong>{m.fields.name}</strong>
          {m.fields.linkedin && <a href={m.fields.linkedin}>LinkedIn</a>}
          {m.fields.github && <a href={m.fields.github}>GitHub</a>}
          {m.fields.website && <a href={m.fields.website}>Website</a>}
        </li>
      ))}
    </ul>
  );
}

Storage#

Plain string, trimmed on save:

json
{ "linkedin": "https://linkedin.com/in/alice", "github": "https://github.com/alice" }

Query result#

Returned as-is — string. Use directly in href attributes.