Phone Input
An accessible phone input component with automatic country detection and international phone number formatting.
Installation
pnpm dlx shadcn@latest add @diceui/phone-inputLayout
Import the parts, and compose them together.
import {
PhoneInput,
PhoneInputCountrySelect,
PhoneInputField,
} from "@/components/ui/phone-input";
return (
<PhoneInput>
<PhoneInputCountrySelect />
<PhoneInputField />
</PhoneInput>
)Examples
Custom Countries
Provide a custom list of countries to display in the dropdown.
With Form
Use the phone input component in a form with validation.
API Reference
PhoneInput
The root container component that acts as both the wrapper and input group. Handles layout, borders, and focus states.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the phone input is disabled |
[data-invalid] | Present when the phone input is invalid |
[data-readonly] | Present when the phone input is read-only |
PhoneInputCountrySelect
The button component that triggers the country dropdown. Uses Popover and Command internally for the country list.
Prop
Type
PhoneInputField
The input field component for entering the phone number.
Prop
Type
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab | Moves focus to the next focusable element (country select or phone input field). |
| SpaceEnter | Opens the country dropdown when focused on the country select button. |
| Escape | Closes the country dropdown. |
| ArrowUpArrowDown | Navigate through country items when the dropdown is open. |
| HomeEnd | Jump to first or last country in the list. |
| Type to search | Filter countries by name, dial code, or country code as you type. |