URLInput

URLInput separates protocol choice from the address body so forms can guide users toward allowed protocols without custom string helpers.

#Default usage

<URLInput aria-label="Website" placeholder="example.com" />

#Import

import { URLInput } from "@froggdesign/enter-ui-react";

#Controlled

<URLInput
  value={url}
  onValueChange={setUrl}
  allowedProtocols={["https", "http"]}
  defaultProtocol="https"
/>

#Patterns

Use URLInput for webhook endpoints, website fields, callback URLs, docs links, and integration settings.

#Accessibility

The protocol selector has an explicit label and the text input keeps the consumer-provided label. Use invalid with field-level error text for unsupported or unreachable URLs.

#API

• allowedProtocols: protocol list. Defaults to ["https", "http"].
• defaultProtocol: protocol used when the value has no protocol.
• value, defaultValue: full URL string.
• onValueChange: called with the normalized full URL.
• invalid: marks the text input invalid.

#Styling

The combined protocol and URL field uses the shared medium (8px) control radius.

URLInput uses .eui-url-input classes and FroggDesign tokens for layout, state, focus, and disabled styling.