Phone input
A phone number field that formats as you type: each digit rises into place, the country's spaces and brackets appear as the number reaches them, and changing country regroups the same digits with the separators sliding to their new places.
Ghana · enter your national number. For example, 24 412 3456.
Things to try
- Type a number. Spaces appear as the number reaches them.
- Search countries. Search by name, country abbreviation, or dialing code across the ten example countries.
- Change the country. The same digits regroup into the new format when the input is not focused. Extra digits are preserved and a length hint appears.
- Paste a full number. A pasted country code or leading zero is dropped.
Install
npx shadcn@latest add https://your-docs-site/r/phone-input.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- Built on Base UI.
Fieldgives the label and description, andComboboxprovides the searchable country picker. - Native editing. The real input is visible while focused, supporting caret placement, selection, and deletion. The formatted animated preview returns on blur.
- Separators slide. Digits are keyed by their position and separators by their order, so a space shared by both formats moves instead of being redrawn.
Amount input
An amount field where the digits you type rise into place and the separators slide to make room. Refused input gets a small shake, and going over your balance turns the field red while the line under it morphs to say by how much.
Tag input
A tag field where the words you type become the tags: press comma or Enter and the chip forms around the text right where you typed it, with existing tags suggested as you go.