Taiwan Phone Input: Free React + Tailwind Component

Mobile numbers starting with 09 are formatted automatically as 09xx-xxx-xxx, with landline and mobile detected automatically.

A Taiwan phone number input: hyphens are inserted as you type (0912-345-678), numbers starting with 09 are detected as mobile and those starting with 0X as landline, grouped by the length of the area code (02-2712-3456). The leading icon switches with the type, an invalid prefix is flagged in red immediately, and pasting a string containing +886, full-width digits, or other noise is cleaned automatically.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add taiwan-phone-input.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Allow landline numbersallowLandline

Disable inputdisabled

Placeholderplaceholder

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TaiwanPhoneInput/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/taiwan-phone-input.en.json

Or, once registries are configured in components.json, install it as @webberui/taiwan-phone-input.

Usage

import { TaiwanPhoneInput } from "@/components/ui/taiwan-phone-input";

const [phone, setPhone] = React.useState("");

<TaiwanPhoneInput value={phone} onChange={setPhone} allowLandline />

onChange returns the cleaned digits (for example 0912345678), ready to store directly in a database; the hyphenated display format is handled inside the component. You can also use the exported normalizeTaiwanPhone and analyzeTaiwanPhone helper functions to clean and validate outside the component.

The landline area code table includes every current long-distance area code (02–08, 037, 049, 082, 089, 0836), matched longest-area-code-first. Some area codes mix 7- and 8-digit subscriber numbers in practice; the component demonstrates the common length, so extend the built-in lookup table if you need more precision.

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled value: the phone number (it may contain noise, which is cleaned to digits internally)
`onChange`	`(digits: string) => void`	—	Fires when the value changes, returning the cleaned digits-only string
`allowLandline`	`boolean`	`true`	Whether landlines (0X area codes) are accepted; `false` accepts only mobile numbers starting with 09
`placeholder`	`string`	depends on `allowLandline`	Placeholder text
`disabled`	`boolean`	`false`	Disable the input
`name`	`string`	—	Form field name; the digits are submitted through a hidden field
`id`	`string`	—	The input element's id, for binding an external label
`className`	`string`	—	Forwarded to the outermost container

Accessibility

It uses type="tel", inputMode="tel", and autoComplete="tel", so mobile devices bring up the numeric keypad automatically and autofill works
aria-invalid is set when validation fails, and the error and success messages sit in an aria-live="polite" region so they are read out immediately
The decorative type icon and status icon are both marked aria-hidden and do not interfere with assistive technology
When the user has "reduce motion" enabled at the system level, the icon switch, the green check pop, and the message expansion animations are disabled
When editing mid-string, the caret position is restored correctly after reformatting and does not jump to the end of the line

Taiwan Phone Input