Phone Input
The PhoneInput component is designed for accurate and user-friendly phone number entry. It features an intuitive interface that allows users to input their phone numbers with automatic formatting and validation based on international standards.
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import PhoneInput from '@start-base/react-form-elements/PhoneInput';Usages
Phone Input With Label
Phone Input With Placeholder
Phone Input With Placeholder And Label
Phone Input With Placeholder And Label And Disable Shrink
Phone Input Disabled
Phone Input Prepend
Phone Input Error
API
This component is a wrapper around react-international-phone (opens in a new tab) component.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| placeholder | string | null | Placeholder of the input |
| disableShrink | boolean | false | Position the label outside of the input |
| value | string or number | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| defaultCountry | string | us | Default country code for phone starting code and flag |
| prepend | string or element | null | Prepend text to the input |
| append | string or element | null | Append text to the input |
| appendClassName | string | null | Classname for append element |
| prependClassName | string | null | Classname for prepend element |