Skip to content

feat(ui): Add phone input - #9656

Draft
austincalvelage wants to merge 1 commit into
austin/comboboxfrom
austin/phone-input
Draft

feat(ui): Add phone input#9656
austincalvelage wants to merge 1 commit into
austin/comboboxfrom
austin/phone-input

Conversation

@austincalvelage

@austincalvelage austincalvelage commented Sep 4, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

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-bot Bot commented Sep 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1055125

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

vercel Bot commented Sep 4, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Sep 4, 2026 5:16am UTC
swingset Ready Ready Preview Sep 4, 2026 5:16am UTC

Request Review

@coderabbitai

coderabbitai Bot commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

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.

@austincalvelage
austincalvelage changed the base branch from main to austin/combobox September 4, 2026 05:16
@github-actions github-actions Bot added the ui label Sep 4, 2026
@pkg-pr-new

pkg-pr-new Bot commented Sep 4, 2026

Copy link
Copy Markdown

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: 1055125

maxyinger
maxyinger reviewed Sep 4, 2026
View reviewed changes

@maxyinger maxyinger left a comment •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

still needs some polish, but getting there

CleanShot 2026-09-04 at 17 00 41@2x

Comment thread packages/ui/src/mosaic/components/phone-input/phone-input.tsx

<InputGroup.Text
aria-hidden='true'
{...mergeStyleProps(themeProps('phone-input-prefix'), stylex.props(styles.prefix))}

@maxyinger maxyinger Sep 4, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread packages/ui/src/mosaic/components/phone-input/phone-input.tsx
}}
>
<Field.Root>
<InputGroup.Root

@maxyinger maxyinger Sep 4, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@maxyinger maxyinger maxyinger left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@austincalvelage @maxyinger