Input URL

A URL input with native browser URL validation. Provides an optimised keyboard on mobile and supports autocomplete for web addresses.

Default

URL input with native browser URL validation.

<diwa-input-url label="Website URL" placeholder="https://example.com"></diwa-input-url>

Validation states

<diwa-input-url label="Website URL" value="not-a-url" state="error" message="Please enter a valid URL starting with https://."></diwa-input-url>

<diwa-input-url label="Website URL" value="https://diwacopilot.com" state="success" message="URL is reachable."></diwa-input-url>

Compact

<diwa-input-url label="Website URL" placeholder="https://example.com" compact></diwa-input-url>

Slots

Use start to prepend a protocol prefix inside the input border, and label-after to place contextual icons or links after the label.

https://

<diwa-input-url label="Website" placeholder="example.com">
  <span slot="start">https://</span>
  <diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-url>