URL Field

Use the URL field composition for editable usernames, slugs, team URLs, and similar values whose static prefix can vary by environment or tenant.

Copyimport { UrlFieldLabelRow, UrlInputWithAddon } from "@coss/ui/shared/url-field";
import { getUrlFieldAddonParts } from "@coss/ui/shared/url-field-addon-parts";

getUrlFieldAddonParts decides which static URL text belongs in the addon and, for long domains, which domain text moves beside the label. UrlInputWithAddon then:

• hides the addon below sm;
• restores normal input padding on mobile;
• renders the complete current URL in UrlFieldDescription;
• keeps separators adjacent to the truncatable addon text;
• falls back to a plain InputGroup when there is no addon.

Do not copy this behavior into call sites. Read the Input addons and URL fields guide and choose one of the policies below.

Profile policy: keep the full prefix

Profile and username fields keep the full static prefix in the desktop addon, even when it is long. Pass splitLongDomain: false.

Copyconst urlParts = getUrlFieldAddonParts(domain, "team", {
  splitLongDomain: false,
});
 
<Field>
  <FieldLabel>{t("team_url")}</FieldLabel>
  <UrlInputWithAddon
    addonText={urlParts.addonText}
    fullStaticText={urlParts.fullPrefixDisplay}
    value={slug}
  >
    <InputGroupInput value={slug} onChange={onChange} />
  </UrlInputWithAddon>
</Field>

Conventional URL policy: split long domains

Create, duplicate, and setup flows use the default helper policy. Domains with at least URL_PREFIX_SPLIT_MIN_LENGTH characters are shown beside the label; the path remains in the desktop addon. Short domains remain together in the addon.

Copyconst urlParts = getUrlFieldAddonParts(domain, "team/customer-success");
 
<Field>
  <UrlFieldLabelRow domainDisplay={urlParts.domainDisplay}>
    <FieldLabel>{t("url")}</FieldLabel>
  </UrlFieldLabelRow>
  <UrlInputWithAddon
    addonText={urlParts.addonText}
    fullStaticText={urlParts.fullPrefixDisplay}
    value={slug}
  >
    <InputGroupInput value={slug} onChange={onChange} />
  </UrlInputWithAddon>
</Field>

UrlFieldLabelRow marks the split domain as decorative, truncates it, adds the full value as title, and hides it on mobile. Keep the actual FieldLabel as the control's accessible name.

Separators and placement

The default composition is static/value. Separators are explicit so punctuation is not coupled to URL paths:

Pass fullStaticText without the separator. The component uses the same separator and placement for the desktop addon and the complete mobile preview.

Use plain InputWithAddonText when a suffix such as .cal.com is fixed, bounded, and should stay visible on mobile. Use UrlInputWithAddon when the complete mobile URL preview is required.

Props

UrlInputWithAddon

UrlFieldLabelRow

Call sites

Example URLs

Not exhaustive — open these locally from http://localhost:3000.

Source

packages/coss-ui/src/shared/url-field.tsx