URL Field Description
Mobile-only complete URL preview used by the shared URL field composition.
UrlFieldDescription renders the complete current display URL with a globe icon below an editable URL
field. It is hidden from sm upward because the desktop addon already supplies that context.
import { UrlFieldDescription } from "@coss/ui/shared/url-field-description";In normal URL fields, do not render this directly. UrlInputWithAddon
constructs the complete value and renders the description automatically.
Example
The docs frame forces the description visible. In product it appears only below sm.
cal.com/team/customer-success/15min
Props
| Prop | Notes |
|---|---|
url | Complete current display URL (static portion + separator + editable value), without protocol |
When to use
Use it directly only when UrlInputWithAddon showDescription={false} is required by a surrounding
layout, such as an input and action button grouped in one row. Render the description immediately after
that row and pass the same complete URL that UrlInputWithAddon would produce.
Do not use it as static helper copy, do not omit the live editable value, and do not force it visible on desktop in product code.
Call sites
| File | Notes |
|---|---|
packages/coss-ui/src/shared/url-field.tsx | Default rendering inside UrlInputWithAddon |
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx | Description outside action row |
apps/web/modules/settings/admin/impersonation-view.tsx | Description outside grouped input/button |
Example URLs
Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.
| Path | Notes |
|---|---|
/settings/my-account/profile | Username field at a narrow viewport |
/settings/admin/impersonation | Impersonation field at a narrow viewport |