Forms
Phone Number Field
Phone Number Field is a compound field pairing a country/dial-code selector with a phone number input, shown as two adjacent but visually separate controls.
State — 4 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Known limitation: The flag is a generic two-stripe placeholder shape, not a real national flag.
Purpose
Phone Number Field is a compound field pairing a country/dial-code selector with a phone number input, shown as two adjacent but visually separate controls.
When to use
Any international phone number entry where the country code matters.
When not to use
Domestic-only phone entry — use a plain Text Input with input masking.
Accessibility
The country selector needs its own accessible label distinct from the phone number input's label.
Common mistakes
Treating the flag as purely decorative — it should be operable, since it changes the selected country/dial code.
Properties
State as variants. Dial Code (text), Value (text).
Tokens used
component/radius/controlsemantic/border/default
Known limitation
The flag is a generic two-stripe placeholder shape, not a real national flag.