PhoneInput

International phone input with country picker, flag emoji and automatic formatting. Outputs an E.164-style string (+CC NNNNNNNN). Exported as PhoneI for back-compat.

Examples

With label

Phone number*

Value: ∅

import { useState } from 'react';
import { PhoneInput } from '@kactostecnologia/benix-ds';

export default function ContactForm() {
  const [phone, setPhone] = useState('');

  return (
    <PhoneInput
      label="Phone number"
      required
      value={phone}
      onChange={setPhone}
    />
  );
}

Pre-filled with country code

Pass a full E.164 string and the picker auto-selects the matching country.

Mobile

Value: +5511999998888

import { useState } from 'react';
import { PhoneInput } from '@kactostecnologia/benix-ds';

export default function EditContact() {
  const [phone, setPhone] = useState('+5511999998888');

  return (
    <PhoneInput
      label="Mobile"
      value={phone}
      onChange={setPhone}
    />
  );
}

Error state

Phone

Phone number is required.

import { PhoneInput } from '@kactostecnologia/benix-ds';

export default function ValidatedForm() {
  return (
    <PhoneInput
      label="Phone"
      value=""
      onChange={() => {}}
      error="Phone number is required."
    />
  );
}

API Reference

Props of the PhoneInput component.

Prop	Type	Default	Description
`value`	`string`	—	Full phone with country code, e.g. "+5511999998888".
`onChange`	`(value: string) => void`	—	—
`onBlur`	`() => void`	—	—
`label`	`string`	—	—
`required`	`boolean`	`false`	—
`error`	`string \| null`	—	—
`placeholder`	`string`	`'Digite o número de telefone'`	—
`disabled`	`boolean`	`false`	—
`id`	`string`	—	Optional id (auto-generated otherwise).