Phone input

A React component in Beamline's Form controls category.

A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the value is E.164.

Use it for

• Phone numbers you will call or text, stored as E.164.

Not for

• Free-text contact fields where format does not matter (input).

Anatomy

• label
• country button (two-letter country code, dialling code)
• country list with search
• number field
• description / error

States

• empty
• typing
• complete
• too short or long (validate)
• error
• disabled

Keyboard

• Tab to the country button, Enter opens the list
• type to filter, ↑ ↓, Enter picks

Motion

The list grows from the button. Opens out of its trigger (_shared/overlay.module.css, source morph): the layer starts as the trigger's own box, offset onto it, and grows; the side next to the trigger is there at once so the nearest rows read within the ruled 90 ms, the far side settles by ~200 ms, content fades in over 90 ms; it closes back into the trigger in 180 ms. Until it has grown the press that opened it cannot land on a row. Reduced motion: it appears.

Props

Dependencies

@radix-ui/react-popover, lucide-react

Import

import { PhoneInput } from "@/components/phone-input/phone-input";

Get it

Phone input is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent

More in Form controls

• Allocation editor: Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
• Billing toggle: Monthly or yearly: a segmented control whose yearly note turns into what the choice saves.
• Calendar: Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
• Checkbox: A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
• Chip group: Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N more”.
• Color Palette: A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
• Colour picker: A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
• Combobox: One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
• Date picker: One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
• Date range picker: A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
• File drop zone: A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
• Form: Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
• Inline edit: Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
• Input: A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
• Input Dissolve: A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
• Label: The text label tied to a form control, with a required marker that screen readers announce.
• Mention input: A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
• Multi-select: Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
• Number field: A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
• OTP input: A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
• Password field: A password field with a reveal control, and a strength meter when a password is being created.
• Radio cards: One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
• Radio group: One choice from a short visible set, each option with an optional description, vertical or in a row.
• Rich text editor: A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
• Search field: The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
• Segmented control: Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
• Select: One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
• Shortcut recorder: Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
• Signature pad: A pad for a drawn signature whose ink thins with speed; undo, replay, PNG or SVG export, and typing instead for keyboards and screen readers.
• Slider: A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
• Switch: A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
• Tag input: Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
• Textarea: Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
• Time picker: A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
• Toggle group: Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.