Input With Addon Text
InputGroup composition for bounded text prefixes and suffixes.
Use InputWithAddonText when the addon is predictable and should remain part of the input at every
breakpoint: units (minutes, credits), currencies, and fixed domain suffixes such as .cal.com.
For a URL prefix whose length depends on deployment, organization, team, or username, use
UrlInputWithAddon. It owns mobile hiding, the complete mobile preview,
separator placement, and the no-addon fallback.
import { InputWithAddonText } from "@coss/ui/shared/input-with-addon-text";Props
| Prop | Default | Notes |
|---|---|---|
text | — | Truncatable addon content |
leadingText | — | Non-truncating text immediately before text |
trailingText | — | Non-truncating text immediately after text |
align | "before" | "before" | "after" |
endAddon | — | Optional trailing control (e.g. copy button) |
hideAddonOnMobile | false | Low-level responsive behavior; prefer UrlInputWithAddon for URL fields |
textProps / className | — | Pass-through |
Example
These examples map to shipped duration and organization-subdomain fields.
Choosing the addon shape
| Need | Composition |
|---|---|
| Unit or fixed suffix | InputWithAddonText with align="after" |
| Currency or fixed prefix | InputWithAddonText with the default align="before" |
| Fixed domain suffix | Include the punctuation in text, e.g. .cal.com |
| Variable URL prefix | UrlInputWithAddon |
| Read-only value with copy as the primary action | CopyableField |
Read the Input addons and URL fields guide before composing a new URL editor. Do not reproduce URL splitting with local length checks or breakpoint markup.
Call sites
| File | Notes |
|---|---|
apps/web/modules/event-types/components/create-event-type-form.tsx | Duration suffix |
apps/web/modules/ee/organizations/components/org-profile-form-card.tsx | Fixed .cal.com suffix + copy control |
apps/web/modules/settings/billing/components/BillingCredits.tsx | Credits suffix |
packages/features/eventtypes/components/tabs/advanced/FormBuilder.tsx | Currency prefix |
Example URLs
Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.
| Path | Notes |
|---|---|
/event-types | Create-event duration field |
/settings/organizations/profile | Organization subdomain suffix |
/settings/billing | Additional credits |