Phone Input

Phone Inputs allow for users to enter and edit phone numbers, typically in a Form. There is masking support for phone numbers with a +1 country code (USA).

Phone Inputs will accept numbers only and uses built-in validation for telephone numbers. If an invalid phone number is entered, an error will be displayed when the user submits.

Required

If the Phone Input field is required, you should pass the required prop. This will prevent any Form submission until the required Phone Input is complete.

Disabled

You may wish to disable an Phone Input field in order to prevent a user from entering or editing any information while some task is being completed, or to restrict a user's access.

Read only

If you want to render information that has already been entered for viewing purposes only, use the readOnly prop. The user will not be able to edit the Phone Input if it is read only.

Sometimes you may want to add some styling to a Phone Input field given the outcome of certain user actions. The color schemes for the following statuses can be controlled via components['form-field'] in the Theme. In Cosmos, a success status isn’t typically presented to the user because it is possible that the field will pass client-side validation but may fail when checking against server-side validation.