Inline country select
defaultshadcnOne visual field with separate accessible country and phone controls.
Best for settings, profiles, and compact forms.
Copy-paste
Recipes
Production-ready PhoneField patterns composed from the same primitives and shadcn components used by the playground.
Basics
Use when
Use this as the default for profiles, contact forms, and account settings.
Requires
field · input-group
Accessibility
Country and phone keep independent names while sharing one visual boundary.
Use when
Use it when labels and column alignment matter more than compactness.
Requires
field · input
Accessibility
Each control has its own visible label and focus target.
Use when
Use it for market-specific products or tenant-level country policies.
Requires
field · input-group
Accessibility
The dialing code remains visible even though it is not interactive.
Use when
Use it for business contacts, support desks, and PBX-backed phone records.
Requires
field · input-group
Accessibility
Phone and extension have independent labels, values, and input modes.
Forms
Use when
Use it in controlled forms that own validation without a form library.
Requires
field · input-group
Accessibility
Errors are connected with aria-describedby and exposed through aria-invalid.
Use when
Use it for native forms, server actions, or progressively enhanced submissions.
Requires
field · input-group
Accessibility
The visible field remains native while hidden source inputs serialize the value.
Use when
Use it when React Hook Form owns the complete form state and submission lifecycle.
Requires
react-hook-form · @hookform/resolvers · zod · field · input-group
Accessibility
Controller forwards blur, value changes, invalid state, and the Zod message.
Use when
Use it for deeply typed or highly reactive forms built around TanStack's ecosystem.
Requires
@tanstack/react-form · zod · field · input-group
Accessibility
Field meta drives real-time aria-invalid and a colocated error announcement.
Use when
Use these patterns for permissions, persisted values, and async mutations.
Requires
field · input-group
Accessibility
Native disabled/readOnly semantics are paired with visible status affordances.
Product flows
Use when
Use it for sign-in, onboarding, account recovery, and phone verification.
Requires
button · card · field · input-group · input-otp
Accessibility
Each step exposes a single task, preserves the phone value, and labels the OTP slots.
Use when
Use it when users frequently paste numbers from contacts, CRMs, or messages.
Requires
field · input-group
Accessibility
Country changes are reflected in visible text, not communicated by flag alone.
Mobile & localization
Use when
Use it when product availability is restricted to a known set of countries.
Requires
field · input-group
Accessibility
Localized names remain searchable and visible beside their dialing codes.
Use when
Use it on mobile-first forms where a popover would feel cramped or hard to scan.
Requires
button · drawer · field · input · input-group
Accessibility
The trigger names its purpose and the modal drawer keeps search and options reachable.