InputPhone

atoms

Phone number input with country code selector. Format validation.

ARIA Role: group

Demo

Email address

With error

Please enter a valid value

Props

Prop	Type	Required	Default	Description
`value`	`string`	No	`—`	Phone number value
`onChange`	`(value: string) => void`	Yes	`—`	Value change handler
`defaultCountry`	`string`	No	`'CA'`	Default country code
`disabled`	`boolean`	No	`false`	Disabled state
`error`	`string`	No	`—`	Validation error

TypeScript Interface

interface InputPhoneProps {
  value?: string;
  onChange: (value: string) => void;
  defaultCountry?: string;
  disabled?: boolean;
  error?: string;
}

Assertions (NASA Rule 5)

[type]countryCode must be ISO 3166-1 alpha-2(ISO 3166-1)
[validation]E.164 format: +[country code][number], max 15 digits(ITU-T E.164)
[aria]Provide aria-invalid when validation fails(WCAG 1.3.1)
[aria]Format hint must be linked via aria-describedby(WCAG 3.3.2)

Usage

Import

import { Inputphone } from '@epasslive/design-system'

Basic

<Inputphone />

With Variants

<Inputphone variant="primary" size="md" />