Phone Number Input

US-format phone input: displays as (123) 456 - 7890. Stores and passes only digits (max 10). Handles backspace and restricts to numbers.

Installation

tsx

import { PhoneNumberInput } from "@workspace/ui/components/phone-number-input"

tsx

const [digits, setDigits] = useState("")

<PhoneNumberInput
  label="Phone"
  value={digits}
  onChange={setDigits}
/>

Phone

Prop	Type	Default	Description
label	string	-	Label above the input.
error	string	-	Error message shown below.
hint	string	-	Hint text below.
value	string	-	Digits only (e.g. 10 digits for US).
onChange	(digits: string) => void	-	Called with digits only when value changes.
containerClassName	string	-	Classes for the wrapper.
inputClassName	string	-	Classes for the input element.