build69 / Components / Masked & Validated / TaxIdInput

TaxIdInput

v1.0.2Updated 22 Sept 2026

Thai 13-digit tax ID field masked as `X-XXXX-XXXXX-XX-X`. The grouping hyphens are inserted by the mask, so the field only ever accepts digits and the accepted value is always correctly grouped. Renders monospace tabular figures with inputMode="numeric".

View source ← Back to catalog

Preview

Live · 5 stories

Thai Tax IdOpen ↗

▸Why this is recommendedformmaskinputtax-id+4

TaxIdInput — thai tax id.

Recommended for+14

✓Thai tax ID entry
✓VAT registration number on a company onboarding form
✓Collecting a Thai national ID number
✓KYC or business verification forms
✓Invoice or billing profile setup for Thai companies

Tags+6

formmaskinputtax-idthaivatkyctax

Features+4

Thai 13-digit `X-XXXX-XXXXX-XX-X` mask
Hyphen grouping inserted automatically — digits only
inputMode="numeric" for a mobile number pad
Monospace tabular-nums so digits do not jitter while typing
Sanitised masked value via onAccept
Supports aria-invalid for inline validation
Inside a FormField the error shows as a ring on the input box, so nothing stacks on the checksum verdict

Not recommended for−2

✕Non-Thai tax identifiers (use InputMask with your own pattern)
✕Checksum validation (validate in your own handler)
✕Free-form text (use Input)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "TaxIdInput" })

Usage

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

value

Current masked tax ID

string—

onAccept

Fires whenever the masked value changes

(value: string) => void—

onComplete

Fires when all 13 digits are entered

(value: string) => void—

aria-invalid

Renders the destructive border and ring

boolean—

disabled

Disables the field; the value stays masked