Phone Input

A searchable country selector welded to a national number field, emitting E.164.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { PhoneInput } from "@aile.sh/elia";

export function Example() {
  const [phone, setPhone] = useState("+6281234567890");
  const [support, setSupport] = useState("");

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {/* every country, with a few pinned to the top */}
      <PhoneInput
        value={phone}
        onChange={setPhone}
        preferred={["ID", "SG", "MY", "US", "GB"]}
      />

      {/* only the regions this product actually serves */}
      <PhoneInput
        value={support}
        onChange={setSupport}
        only={["ID", "SG", "MY", "TH", "VN", "PH"]}
        defaultCountry="ID"
      />

      <p className="font-mono text-[11px] text-ink-3">value: {phone || "—"}</p>
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia