feat(ui): Add phone input

[austincalvelage]

Description

https://swingset-git-austin-phone-input.clerkstage.dev/components/phone-input

Adds a Mosaic PhoneInput with a searchable country picker, formatted number entry, and normalized E.164 values. It integrates with Mosaic Field and supports controlled and uncontrolled usage.

[changeset-bot]

🦋 Changeset detected

Latest commit: cd333c3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Sep 9, 2026 9:52pm UTC
swingset	Building	Preview	Sep 9, 2026 9:52pm UTC

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9656

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9656

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9656

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9656

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9656

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9656

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9656

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9656

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9656

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9656

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9656

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9656

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9656

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9656

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9656

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9656

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9656

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9656

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9656

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9656

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9656

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9656

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9656

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9656

commit: e7e662b

[maxyinger]

still needs some polish, but getting there

[maxyinger]

like I wonder if we use the addon api if this can just be an addon aligned to the start?

similar to http input in this example:
https://ui.shadcn.com/docs/components/aria/input-group#button

[maxyinger]

base has a good example here. it's nice to see how they compose everything:
https://base-ui.com/react/components/combobox#input-inside-popup

this is a little different cus of the main input, but figured I mention the reference