Design System
Phone Input
Phone-number field with a country selector (flag + caret) and a floating label. eShop platform — shares the field with Text Input. Supports error and info messages, disabled, and an on-dark surface variant.
Playground
States
Empty (label as placeholder), filled, error, info, and disabled. The country selector shows a flag clip placeholder until flag assets are added.
On dark surface
Pass onDark on a bold or dark surface — it uses the on-dark token variants, including the divider.
When to Use
Best for
- Collecting a phone number with an international dial code
- Forms where the country needs to be explicit (shipping, verification)
Consider alternatives when
- Collecting non-phone numbers — use Text Input
- Collecting a card number — use Card Input
Props
| Prop | Type | Required | Description |
|---|---|---|---|
label | string | No | Field label (default: "Phone number") |
value | string | No | Phone number (controlled). Pair with onChange |
defaultValue | string | No | Initial value (uncontrolled) |
onChange | (value: string) => void | No | Change handler |
flag | ReactNode | No | Country flag for the 24×24 slot (clip placeholder until assets land) |
onCountryClick | () => void | No | Country-selector click handler (picker ships with flag assets) |
error | string | boolean | No | Error message (string) or error border only (true) |
info | string | No | Helper message (hidden while an error is shown) |
isDisabled | boolean | No | Disable the field |
onDark | boolean | No | Use on-dark token variants |
Import
import { PhoneInput } from '@/components/PhoneInput/eshop';
Wrap in <div data-platform="eshop"> so the eShop typography classes apply. The country selector renders a flag clip placeholder; the country-picker dropdown ships with flag assets.
Design Tokens
| Purpose | Token |
|---|---|
| Field fill | var(--color-fill-element-field) |
| Border (default / focused / error) | var(--color-border-element-field[-focused|-error]) |
| Divider | var(--color-border-neutral) |
| Value text | var(--color-content-primary) |
| Flag slot | var(--color-fill-element-neutral-soft) |
| Error message | var(--color-content-critical) |
| Focus ring | var(--color-border-element-focus-ring) |
| Typography (value / label) | .body-lg / .body-sm |