Recipes

Use when

Use this as the default for profiles, contact forms, and account settings.

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.

Accessibility

Each control has its own visible label and focus target.

Use when

Use it for market-specific products or tenant-level country policies.

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.

Accessibility

Phone and extension have independent labels, values, and input modes.

Use when

Use it when the field owns validation and no form library is involved.

Accessibility

The message is linked with aria-describedby, and aria-invalid follows the field state automatically.

Use when

Use it for native forms, server actions, or progressively enhanced submissions.

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.

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.

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.

Accessibility

Native disabled/readOnly semantics are paired with visible status affordances.

Use when

Use it for sign-in, onboarding, account recovery, and phone verification.

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.

Accessibility

Country changes are reflected in visible text, not communicated by flag alone.

Use when

Use it when product availability is restricted to a known set of countries.

Accessibility

Localized names remain searchable and visible beside their dialing codes.

Use when

Use it when the platform picker beats a custom popup, such as in mobile web or embedded webviews.

Accessibility

A real select keeps native keyboard, screen reader, and touch behavior for the country.

Use when

Use it on mobile-first forms where a popover would feel cramped or hard to scan.

Accessibility

The trigger names its purpose and the current country, and the modal drawer keeps search and options reachable.