PhoneInput

Status: Content below is sourced from the Naos Figma documentation page for Input Phone (file nfTKjsYTKM2qvIo8KXDAXV, node 8036:22285, "🧩 Naos – Forms and inputs", checked 2026-08-19) plus the component's TypeScript source. This Figma page has no written description or usage-rules text at all — the title "INPUT PHONE" has no subtitle, and there's no Overview/When-to-use section (same pattern as Timepicker in this file). Only anatomy, sizes, spacing, and states are documented visually. Nothing below is invented — qualitative usage guidance is left as an explicit TODO.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/molecular/PhoneInput/PhoneInput.tsx (package @dtsl/react, exported as PhoneInput)

Props (verbatim from source)

interface PhoneInputProps {
	label?: string
	requiredLabel?: boolean
	defaultCountryCode?: string
	defaultCallingCode?: string
	defaultPhoneNumber?: string
	countryList?: CountryData[]
	countrySearchPlaceholder?: string
	countrySearchEmptyMessage?: EmptyMessage
	invalidNumberErrorMessage?: string
	disabled?: boolean
	onCountryChange?: (
		data: CountryChangeData,
		event: React.SyntheticEvent
	) => void
	onPhoneChange?: (
		data: PhoneChangeData,
		event: React.ChangeEvent<HTMLInputElement>
	) => void
	onError?: (data: { isValid: boolean }) => void
	selectMenuMetaData?: Record<string, unknown>
	dataTestId?: string
	identifier?: string
	className?: string
	inputStyles?: React.CSSProperties
	size?: 'medium' | 'small'
	inputData?: Record<string, unknown>
	enableEditableCell?: boolean
}

CRITICAL: Figma shows states with no matching dedicated prop

The Figma "States" section documents 7 real visual states per size: Default, Hover, Focused, Filled, Loading (with a spinner inside the input), Read-only, Disabled. Only disabled exists as a dedicated prop in PhoneInputProps — there is no loading or readOnly prop. Before writing the real doc, confirm with engineering how Loading/Read-only are actually triggered:

• via the generic inputData/selectMenuMetaData passthrough props, or
• via internal/undocumented state, or
• not actually implemented yet (design-ahead-of-code, same pattern seen on Banner's "AI" variant)

Don't document loading/readOnly as usable props until confirmed.

Anatomy

From the Figma "Anatomy" section:

1. Container
2. Flag Select — country flag + dropdown chevron
3. Dialing code — e.g. "+33"
4. Number — the phone number field itself

Sizes

Two sizes shown, matching size: M (medium) and S (small).

When to Use

TODO — not covered on this Figma page. Needs design/PM input.

When NOT to Use

TODO — not covered on this Figma page. Needs design/PM input. Name the alternative component if one exists (e.g. plain Input for non-phone text).

Decision Logic

TODO — not covered on this Figma page.

Accessibility

TODO — not covered on this Figma page. Needs UX/product input.

Common Mistakes

• ❌ Assuming loading/readOnly are real props before confirming how those Figma states are actually achieved in code
• TODO — remaining items need UX/product input.