InputPhone

Implemented

Phone number input with country code selector. Format validation.

Categoryatoms

Sourcepatterns/atoms/inputphone.html

AI HintPhone input with country dial-code prefix (CA/US/FR), inputmode=tel and autocomplete=tel (WCAG 1.3.5). Error wiring mirrors the Input atom: semantic-red border plus role=alert announcement.

Phone-number input with country prefix selector. FR-CA: Numéro de téléphone avec indicatif.

InputPhone

Interactive atom (Family 1 — Tier 1)

Phone-number input with country dial-code prefix. Implemented — source at src/components/atoms/inputphone/InputPhone.tsx.

Téléphone

Pays par défaut : CA (+1)

Téléphone

Pays par défaut : US (+1)

Téléphone

Pays par défaut : FR (+33)

Téléphone

Numéro invalide

Pays par défaut : CA (+1)

Désactivé

Pays par défaut : CA (+1)

This component supports light and dark mode.

Status

Implemented. Promoted from planned on 2026-08-25: the conformance-audited implementation (autocomplete, dial-code parity, error border, describedBy hint) moved to src/components/atoms/inputphone/InputPhone.tsx and is exported from the package barrel.

Usage

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

<InputPhone label="Téléphone" value={phone} onChange={setPhone} defaultCountry="CA" />

Accessibility

Native <input type="tel" inputmode="tel"> for the mobile keyboard hint.
autocomplete="tel" declares input purpose for personal-data autofill (WCAG 1.3.5).
Label associated via htmlFor + auto id.
Error message announced via aria-describedby + role="alert"; error state paints the border semantic-red, matching the Input atom.
Country hint (dial prefix) linked via aria-describedby — the visible prefix itself is aria-hidden to avoid double announcement.

Props

Prop

Type

Default

Description

value

string

Controlled value (E.164 format preferred).

onChange

(value: string) => void

—

Change handler.

defaultCountry

'CA' | 'US' | 'FR'

CA

Default country prefix.

label

string

Téléphone

Visible and announced label.

error

string

—

Validation error.

disabled

boolean

false

Disables interaction.

Props

Preview

InputPhone

Prop

Type

Required

Default

Description

value

string

Optional

—

Phone number value

onChange

(value: string) => void

Required

—

Value change handler

defaultCountry

string

Optional

'CA'

Default country code

disabled

boolean

Optional

false

Disabled state

error

string

Optional

—

Validation error

label

string

Optional

'Téléphone'

Visible label for the control.

Quick use:<InputPhone />

Accessibility

ARIA rolegroup

Usage

Import

tsxSnippet

import { InputPhone } from "@epasslive/design-system"

Example 1

tsxSnippet

<Input label="Email" type="email" />

Example 2

tsxSnippet

<Input label="Password" type="password" required />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms