Phone Input

We used the react-phone-number-input library to create this component.

Installation

pnpm dlx shadcn@latest add @spaceui/components-spaceui-phone-input

Usage

import { PhoneInput } from '@/components/spaceui/phone-input'

<PhoneInput placeholder="Enter phone number" defaultCountry="US" value={value} onChange={setValue} />

Examples

Size

API Reference

PhoneInput

The main component for entering phone numbers with country selection.

Utilities

The component re-exports essential phone number utilities:

import {
  PhoneInput,
  isValidPhoneNumber,
  formatPhoneNumber,
  formatPhoneNumberIntl,
  isPossiblePhoneNumber,
  getCountryCallingCode,
} from '@/components/spaceui/phone-input'

• isValidPhoneNumber(value): Checks if the phone number is valid according to international metadata.
• formatPhoneNumber(value): Formats the phone number in national format.
• formatPhoneNumberIntl(value): Formats the phone number in international format (e.g. +1 213 373 4253).
• isPossiblePhoneNumber(value): Quick length check to see if the number could be possible.
• getCountryCallingCode(country): Returns the calling code for a given ISO country code (e.g. 'FR' -> '33').

External Props

This component also accepts all props from the react-phone-number-input library.

Examples

Large phone input

Disabled phone input

Phone input with preset value

Phone input with error state

Phone input with specific default country

Read-only phone input

Real-time validation

With Field, Label and Description