Components

Input URL

Accepts hyperlinks as input for entering and editing web addresses

Overview

  • Available since: Paris
  • A11Y: WCAG 2.1 AA

Input URL is tailored for website address entries, ensuring users enter URLs correctly. It can validate the entered text to conform to URL standards, helping to reduce errors and improve data quality.

ServiceNow link
Input URL code documentation

UIB and developer guidance

Figma link
Input URL Figma component

Horizon components and styles library

Loading playground

When to use

Use input URL when you're asking users to provide web addresses, such as linking to an existing website or any online resources. It’s ideal for ensuring that the URLs are valid and properly formatted.

When not to use

Don’t use input URL for general text inputs that aren’t web addresses. It's not suitable for email addresses, phone numbers, or any text that doesn't follow URL formatting.

Anatomy

anatomy of the URL input field
  1. Label: Text that identifies the expected user input; a label must be present for accessibility, either as the component's label element or external to the component
  2. Required indicator (optional): Field decorator that identifies a required field
  3. Information button (optional): Opens a popover and shows the field helper text
  4. Edit button: When pressed, switches between default and edit view
  5. Value: URL entered by a user

Subcomponents

See usage guidance for input

See usage guidance for popover

See usage guidance for button Iconic

See usage guidance for tooltip

Usage

Use input URL for saving or submitting a URL.

Example of the URL going to the candidate’s portfolio.

In this example, the URL goes to the candidate's online portfolio.

You can also use input URL to upload something directly from a URL.

Example of the URL pointing to an image that the user wants to upload.

In this example, the URL points to an image that the user wants to upload.

Note: If you need input text that isn't hyperlinked, consider using the input component instead.

See the Input component usage guidelines.

Variants

Learn about the parts of input URL

Types

Input URL is only one type of the input field component.

See usage guidelines for input

See usage guidelines for input password

See usage guidelines for input phone

See usage guidelines for textarea

Sizes

Input URL has two sizes: small (sm) and medium (md). Choose a size that fits with your display, complements the surrounding content, and supports the length of the expected user input, including any labels or decorators.

Small

Use the small size for areas that have limited space. The small size reduces the font size of the text.
If icons are included in the input field slot, the padding is reduced between multiple icons.

Medium

Use the medium size alongside similarly sized components and content.

Note: Medium is the default size for input URL.

The subcomponents within an input URL field have specific sizes. See their individual usage guidance for additional information.

In this example, the container supports the length of the input fields.

Configurations

Learn how to customize input URL by configuring the available properties – like placholder text, required field indicator, and optional field indicator.

You can add placeholder text to provide users with guidance on the type of input and expected format. The placeholder text disappears when the user enters the first character.

Shows a URL input field containing placeholder text to help a user complete the URL

Text align

You can configure the text alignment of placeholder and input text. Text align options are: Start (default), center, and end.
Note: Text align options “center” and “end” mustn’t be used in conjunction with decorators, such as the search magnifying glass.

Start alignment

Input field text alignment center.

Center alignment

Input field text alignment right.

End alignment

Required indicator

You can configure an input field as required with an asterisk indicator after the label. This indicates that the user must enter a value in this field.
Note: This indicator shouldn’t be used with the optional field indicator.

URL input field with a required indicator after the label

Optional indicator

You can configure an input field as optional. When used, optional fields display "(Optional)" text next to the label. Add this indicator to an optional field when all other fields are required by default. However, you can show the user that a field is optional without displaying the indicator at all.
Note: This indicator shouldn’t be used with the required field indicator.

URL input field with an optional indicator after the label

Field helper text

Use the field helper text to display information needed for guiding users on how to complete the field. The helper text will display in a popover when the information icon is activated.

Shows the field helper text popover

Design recommentations

Learn how to apply input URL in your design.

Example of letting the user input the full URL
Do

Always let the user input the full URL.

Example of the elements of a URL being split which you don’t want to do.
Don’t

Avoid splitting the elements of a URL. This assumes the top-level domain, which doesn't apply to all URLs.

UI text guidelines

These are some recommendations for using text within URL input field.

Labels

  • Use a label that tells the person that this input is for URLs only

Form field messaging

  • Informational message
    • Use clear and concise language to help the person fill out the input
      • For example, “This URL will go to your profile.”
  • Warning message
    • Include information that helps the person understand any consequences or next steps
    • Use present tense since this message shows up before any input.
      • For example, “Avoid using subdirectories in the URL.”
  • Error message
    • Avoid blaming the person. Instead, tell them what happened and how they can fix it
    • Use past tense since this message shows up after the person submits something.
      • For example, “This URL wasn’t found. Try using another URL.”

Field helper text

  • Provide additional information about the URL to help the person understand what they're expected to input
  • If you’re adding a list into the popover, consider formatting it using bullets to make it easier to read

Placeholder text

  • Use sparingly because it will disappear once the person puts their cursor in the input field
  • Format placeholder text as an example of a URL or a brief description of how to complete the field
    • For example, “Enter the domain name and suffix only.”

Behavior

Learn how input URL behaves when the display changes or a user interacts with the component.

States

Input URL has 2 different views: a default view and an edit view. Each view has multiple states.

Default view

In the default view, input URL has the following states: default, hover, focus, read-only, disabled, and invalid.

State Example
Default now-input-url
Hover now-input-url
Focus now-input-url
Read-only now-input-url
Disabled now-input-url
Invalid now-input-url

Edit view

In the edit view, input URL has the following states: default, hover, focus, read-only, disabled, and invalid.

State Example
Default now-input-url
Hover now-input-url
Focus now-input-url
Read-only now-input-url
Disabled now-input-url
Invalid now-input-url

Responsive behaviors

Input URL resizes based on the width of its container.

Interactions

Learn how input URL responds when a user interacts with it.

Invalid state

If a user enters an invalid URL and navigates away from the input, the input state will change to invalid. Similarly, bypassing a required input will result in the state changing to invalid. In either case, the input will remain in the Edit view until corrected. When in an invalid state, both the label and the asterisk—or optional text, if configured—will appear in red.

In this example, the value is not a URL and a message is provided to help the user resolve the error.

Information button

If you’ve configured helper content, a user can select the information button to view additional information or suggestions for the expected input.

Example of field helper text telling the user what to include in the input field.

In this example, the field helper text tells the user what to include in the input field.

The user can select the URL link to navigate to the specified page.

URL input field displaying a URL that the user can select

Editing

The user can select the pencil iconic button to enter the Edit view.

URL input field with the Edit icon button selected

Once in Edit view, the user can input a new URL or edit an existing one. The cursor automatically appears at the end of the URL in the Edit view.

URL input field in the Edit view

If the URL is longer than the width of the input field, the user can scroll through the URL with their cursor.

Truncation

When the URL exceeds the width of the field, it truncates with an ellipsis. Use the supplementary tooltip component to show the full URL on hover.

input url field truncated

In this example, the URL is longer than the URL input field width.

Usability

Input URL complies with all internationalization and accessibility requirements.

Internationalization

When the display translates to a right-to-left (RTL) language, the input field elements flip. The field action appears on the left side, and the label aligns on the right. Any indicators align to the left of the label.

When right-to-left languages are mixed with left-to-right (LTR) languages, the component aligns on the right and the LTR language reads left-to-right.

URL input field displaying in a right\-to-\left language

Depending on the language, the URL may use transliteration to improve readability. When the URL can't implement transliteration, it displays in an LTR format even if the rest of the UI is in RTL.

URL in URL input field using transliteration

Accessibility

Learn how to access the actionable elements of input URL through keyboard interactions and screen readers.

Keyboard interactions

You can access the actionable elements of input URL with these keyboard keys:

  • Tab or shift + tab: Shifts between the interactive elements on the input field in the standard tab order; the input area is first in this order
  • Enter: Opens the link and moves focus to the link target

When focus is on the Edit action button:

  • Space or enter: Initiates the action

When the focus is in the input field:

  • Right/left arrow: Moves the text entry caret across available text
  • Up/down arrow: Moves the text entry caret through rows of available text (if applicable)
  • Control/command + shift: Selects text
  • Shift + right/left arrow: Selects one character at a time

Screen readers

When you apply ARIA labels to a component, screen readers announce the controls and content of URL input field in the prescribed tab order.

  • Assign the aria-label or aria-labeledby attribute to input field to allow screen readers to provide additonal context for that form field.
  • Assign the aria-describedby attribute to contents of field helper; this provides supplementary user guidance for the content required in the input field.
  • Assign the aria-required to required field indicator and set to "true"; by default, aria-required is set to "false."
  • Assign the aria-invalid to "true" to alert when a field is marked as returning an error; by default, aria-invalid is set to "false."
  • Screen readers will read the tooltip associated with each iconic button; remember to create tooltips that accurately state the iconic button's action.