React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

TelephoneInputLazy

International phone number input with country code selection and validation

Interactive Playground

Customize the phone input properties and see the changes in real-time

Current Value

No input yet

US
+1

Examples

Different states and configurations

Default (US)

US
+1

UK Phone Number

US
+1

With Error

US
+1

Disabled

US
+1

Features

  • ✓ International country code selection
  • ✓ Searchable country dropdown
  • ✓ Debounced onChange callback
  • ✓ Phone number validation
  • ✓ Error state support
  • ✓ Disabled state
  • ✓ Pre-filled phone number support
  • ✓ Country flag display
  • ✓ Automatic formatting

API Reference

Props

phone

string - Initial phone number value (default: '')

phoneCountryCode

string - Initial country code (default: '+1')

debounce

number - Debounce delay in milliseconds (default: 2000)

disabled

boolean - Disable the input (default: false)

error

string - Error message to display

onChange

(value: TelephoneInputValue) => void - Callback when phone number changes

TelephoneInputValue Type

number

string - The phone number (digits only)

countryCode

string - The selected country code (e.g., '+1')

valid

boolean - Whether the phone number is valid

possible

boolean - Whether the phone number is possible