## Usage

Use the `<PhoneInput />` component when you need to collect a phone number with an international dial code. Users can easily search and select their country, after which the dial code will get prepended to the input value.

If you change the input value, from `+61` to `+46` for example, then the country dial code selection will change as well. NOTE: The country code must start with `+` to get recognised and matched.

```tsx live
const [phoneValue, setPhoneValue] = useState('+61123456789');

const handleChange = (value: string) => setPhoneValue(value);

return <PhoneInput value={phoneValue} onChange={handleChange} />;
```

<Notice>
  <Text>
    The `<PhoneInput />` relies on being controlled with state. You “own” the state, which is managed by providing
    handlers to the component. If you need an uncontrolled tel input, use `<TextInput type="tel" />`
  </Text>
</Notice>

### onChange

Use the native `onChange` prop to control the phone input's value.

## Size

The input supports two sizes, `small` and `medium` (default). Prefer using size consistently with other form controls that support the same sizes.

```tsx live
const [phoneValue1, setPhoneValue1] = useState('');
const [phoneValue2, setPhoneValue2] = useState('');
const handleChange1 = (value: string) => setPhoneValue1(value);
const handleChange2 = (value: string) => setPhoneValue2(value);

return (
  <Flex flexDirection="column" gap="medium">
    <PhoneInput size="small" value={phoneValue1} onChange={handleChange1} placeholder="Small" />
    <PhoneInput value={phoneValue2} onChange={handleChange2} placeholder="Medium (default)" />
  </Flex>
);
```

## Placeholder

Use the `placeholder` prop to provide a hint or example of what the user can enter.

```tsx live
const [phoneValue, setPhoneValue] = useState('');

const handleChange = (value: string) => setPhoneValue(value);

return <PhoneInput placeholder="E.g. `+61123456789`" value={phoneValue} onChange={handleChange} />;
```

## Disabled

Use the `disabled` prop when the user shouldn't be able to manipulate the value of the input.

```tsx live
const [phoneValue, setPhoneValue] = useState('');

const handleChange = (value: string) => setPhoneValue(value);

return <PhoneInput disabled value={phoneValue} onChange={handleChange} />;
```

## Invalid

Use the `invalid` prop to communicate that validation has failed for this particular input.

```tsx live
const [phoneValue, setPhoneValue] = useState('');

const handleChange = (value: string) => setPhoneValue(value);

return <PhoneInput invalid value={phoneValue} onChange={handleChange} />;
```

## Other native props

The `<PhoneInput />` also supports the following native `InputHTMLAttributes` (see [props](/packages/phone-input/props) for a full list):

- `onBlur`
- `onFocus`
- `placeholder`

## Utilities

### parsePhoneValue

The `parsePhoneValue` utility splits a phone number string into:

- `countryData`: matched country info, or `null` if none
- `localNumber`: the remaining digits after the country code

```ts
parsePhoneValue('+61123456789');
// {
//   countryData: { abbr: 'AU', code: '+61' },
//   localNumber: '123456789'
// }

parsePhoneValue('123456789');
// {
//   countryData: null,
//   localNumber: '123456789'
// }
```

A phone number input with country dial code selection.

PhoneInput

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources