PhoneNumberInput

Description

전화번호 입력을 위한 특화된 Input 컴포넌트입니다. 숫자만 입력 가능하며, 자동으로 하이픈(-)을 추가합니다.

"use client";

import { useState } from "react";
import { PhoneNumberInput } from "@/registry/ui/phone-number-input";

export const PhoneNumberInputDemo = () => {
  const [value, setValue] = useState("01012345678");

  return (
    <PhoneNumberInput
      value={value}
      onChange={setValue}
    />
  );
};

Installation

pnpx shadcn add @allra/phone-number-input

Usage

import { PhoneNumberInput } from "@/registry/ui/phone-number-input";

<PhoneNumberInput
  value={phoneNumber}
  onChange={setPhoneNumber}
/>

Props

Prop	Type	Default	Description
`value`	`string`	`""`	입력된 전화번호 값
`suffix`	`string`	`undefined`	전화번호 뒤에 표시될 접미사
`maxLength`	`number`	`11`	최대 입력 길이
`onChange`	`(value: string) => void`	`undefined`	값 변경 시 호출되는 콜백
`onBlur`	`() => void`	`undefined`	포커스 해제 시 호출되는 콜백
`error`	`boolean`	`false`	에러 상태 여부
`disabled`	`boolean`	`false`	비활성화 상태 여부
`className`	`string`	`''`	추가 CSS 클래스

Features

자동 포맷팅: 숫자 입력 시 자동으로 하이픈(-) 추가
- 11자리: 000-0000-0000 형식
- 10자리: 000-000-0000 형식
숫자만 허용: 숫자가 아닌 문자는 자동으로 제거
반응형: ResponsiveInput을 기반으로 반응형 크기 지원
에러 상태: 에러 시 빨간색 테두리 표시
비활성화: disabled 상태에서 회색 배경 표시

Examples

다양한 Props 예시

최대 입력 길이 제한

최대 입력 길이를 10자리로 제한한 예시입니다.

<PhoneNumberInputDemo
  defaultValue="0123456789"
  maxLength={10}
/>

에러 상태

에러 상태에서의 컴포넌트 동작을 보여줍니다.

<PhoneNumberInputDemo
  defaultValue="0123456789"
  error
/>

비활성화 상태

비활성화 상태에서의 컴포넌트 동작을 보여줍니다.

<PhoneNumberInputDemo
  defaultValue="0123456789"
  disabled
/>

접미사 추가

전화번호 뒤에 접미사를 추가한 예시입니다.

<PhoneNumberInputDemo
  defaultValue="01012345678"
  suffix=" (선택사항)"
/>

On this page