Phone Input
Freev1.0.0A phone number input with country picker and formatting; returns E.164.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { PhoneInput } from "@/components/ui/notchset/phone-input";
export function OnCallPhone() {
const [phone, setPhone] = React.useState("");
return (
<form action="/api/on-call" method="post">
<PhoneInput defaultCountry="PT" onValueChange={setPhone} />
<input type="hidden" name="phone" value={phone} />
</form>
);
}Props
defaultCountry / defaultValue–string / E.164Where to start.
onValueChange–(e164, country) => voidE.164 once complete, "" until then.
countries–{ iso, name, dial, groups }[]Your list (22 by default).
error–stringA server's rejection, in place of the help line.
Anatomy
- No primitive needed: one file serves both builds.
- Grouping per country; extra digits are cut, never silently accepted.
- Bring your own countries for other formats.
PhoneInputdata-slot="phone-input"The field.
listdata-slot="phone-input-root"Field, help and list.
Source
components/ui/notchset/phone-input.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/phone-input.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/phone-input.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/phone-input.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Collecting a mobile number for pages, 2FA or contact
Use something else when
- International address forms with many fields: use a dedicated library
Mistakes to avoid
- Store the E.164 value, not the formatted text
Agents find it by
- phone input, phone number, country code, tel, E.164, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/phone-input.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- +
- Open the country list
- ↑ / ↓
- Move
- Enter
- Pick
- Esc
- Close
Accessibility
- type=tel with autocomplete tel-national; the help line describes it
- The country key is a listbox button; the list's search field leads it with aria-activedescendant
- Short numbers are flagged on blur, not while typing
Motion
- Valid
- The node's centre pops in (300ms)
- List
- Unrolls (360ms); the highlight glides between rows (140ms)
Responsive
- Fills its container; the list is 260px. 44px field on touch screens.
Performance
- Formatting and filtering are synchronous string work; the list mounts with the field.
Changelog
v1.0.0 · 2026-10-02
First release
