mui-outlined-phone-input

• Phone number input for React with corresponding country picker
• Styled to match @mui-material outlined textfield

Table of Contents

• Installation
• Basic Example
• Props

Install

npm install mui-outlined-phone-input

yarn add mui-outlined-phone-input

Example

1import { Input as PhoneInput } from 'mui-outlined-phone-input';
2import { useState } from 'react';
3
4const Form = () => {
5  const [phone, setPhone] = useState('+15045555555');
6
7  return (
8    <div>
9      <PhoneInput
10        value={phone ?? ''}
11        onChange={(e: { target: { value: string } }) => setPhone(e?.target?.value ?? '')}
12      />
13    </div>
14  )
15}

Props

Name	Type	Default	Description
value	string	''	The initial and or current value
onChange	function	() => {}	A function to update inputs value
label	string	'Phone number'	(optional) The inputs label
palceholder	string	'(504) 555-5555'	(optional) The inputs placeholder
error	boolean	false	(optional) Whether or not to show the input in error state
helperText	string	''	(optional) Inputs helperText
className	string	''	(optional) Classes to apply to the input
wrapperClassName	string	''	(optional) Classes to apply to the inputs wrapper
disabled	boolean	false	(optional) Whether or not to disabled the input