## Overview [#overview]
`PhoneInput` combines a country selector and phone number field into one attached input group. It uses Cubitt `Button`, `Input`, and `Combobox` primitives under the hood, with international formatting from `react-phone-number-input`.
## Usage [#usage]
```tsx
import { PhoneInput } from "@tilt-legal/cubitt-components/phone-input";
```
```tsx
```
## Examples [#examples]
### States [#states]
Default, error, disabled, and readonly states.
```tsx
import { PhoneInput } from "@tilt-legal/cubitt-components/phone-input";
const states = ["default", "error", "disabled", "readonly"] as const;
const [state, setState] =
useState<"default" | "error" | "disabled" | "readonly">("default");
<>
{
if (states.includes(value as (typeof states)[number])) {
setState(value as (typeof states)[number]);
}
}}
value={state}
>
DefaultErrorDisabledReadonly
;
```
### Basic [#basic]
A standard phone input with country selection.
```tsx
import { PhoneInput } from "@tilt-legal/cubitt-components/phone-input";
;
```
### Sizes [#sizes]
Phone input in different sizes.
```tsx
import { Label } from "@tilt-legal/cubitt-components/label";
import { PhoneInput } from "@tilt-legal/cubitt-components/phone-input";
```
## API Reference [#api-reference]
### PhoneInput [#phoneinput]
| Prop | Type | Default | Description |
| ---------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
| `value` | `string` | – | Phone number value in E.164 format. |
| `onChange` | `(value: string) => void` | – | Callback when the phone number changes. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Input size. |
| `placeholder` | `string` | – | Placeholder text for the phone number field. |
| `disabled` | `boolean` | `false` | Disables the country selector and phone number field. |
| `readOnly` | `boolean` | `false` | Makes the number readonly and prevents country selector changes. |
| `defaultCountry` | `Country` | `"AU"` | Default country code, such as `"US"`, `"GB"`, or `"AU"`. |
| `countries` | `Country[]` | – | Country codes to display. Shows all countries when omitted. |
| `popupClassName` | `string` | – | Additional classes for the country selection popup. |
| `className` | `string` | – | Additional classes for the phone number input element. |
| `aria-invalid` | `boolean` | – | Applies error styling to the phone number input. |
### Types [#types]
```tsx
import type { PhoneCountry } from "@tilt-legal/cubitt-components/phone-input";
```
`PhoneCountry` is the `Country` type from `react-phone-number-input`.