Forms v1.0.0

Phone Input

International phone number input with country selector dropdown, flag emojis, and dial codes. Features a searchable country list, auto-formatting, and a hidden input that stores the E.164 formatted value for form submission.

Preview & Code

Options

Name Type Default Description
name * String required Form field name attribute (used on the hidden input for E.164 value)
value String nil Initial phone number value (digits only, without dial code)
default_country String "US" Default country code (ISO 3166-1 alpha-2)
label String nil Label text displayed above the input
placeholder String nil Placeholder text for the phone number input
required Boolean false Whether the field is required
disabled Boolean false Whether the field is disabled
size Symbol :md Input size: :sm, :md, or :lg
error String nil Error message -- turns the border red and displays below the input

Changelog v1.0.0

- v1.0.0: Initial release with country selector, searchable dropdown, and E.164 hidden value
- 30 countries with flag emojis and dial codes
- Three size options: sm, md (default), lg
- Error and disabled states
- Full dark mode support

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now