PhoneInput

국가 코드와 전화번호를 함께 입력.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

휴대전화 번호

CountryPhone number

label

hint

error

requireddisabledreadOnly

defaultCountry

defaultValue

예시

상태

비어 있음
휴대전화 번호
CountryPhone number
입력됨
휴대전화 번호
CountryPhone number
국가 변경 (US)
휴대전화 번호
CountryPhone number
도움말
휴대전화 번호
CountryPhone number
알림을 받을 번호예요. 소유 확인은 하지 않아요.
오류
휴대전화 번호
CountryPhone number
이 국가의 번호 형식과 맞지 않아요.
비활성
휴대전화 번호
CountryPhone number

이렇게 · 이렇게 하지 않기

이렇게 전화번호가 꼭 필요한 흐름에만 쓴다(출시 범위에는 없음). 국가는 국기 없이 국가 이름으로 보여준다. 형식이 맞아도 번호의 주인임을 뜻하지 않으므로 “확인됨”으로 표시하지 않는다.
이렇게 형식은 입력이 끝난 뒤(blur) 맞춘다. 입력 중에 바꾸면 커서가 튄다.
이렇게 하지 않기 IP로 국가를 추정하지 않는다. 검색 팝오버 대신 네이티브 select.
이렇게 하지 않기 형식 검사를 소유 확인처럼 표시하지 않는다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`휴대전화 번호`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`defaultCountry?`	`'KR' \| 'US' \| 'CN' \| 'ES' \| 'MX'`	`KR`	처음 국가. 생략하면 UI 로캘에서 고른다(ko→KR, en→US, zh→CN, es→ES). IP로 추정하지 않는다.
`defaultValue?`	`string`		국내 번호 초기값.
`name?: string`	—	—	숨김 필드로 E.164(+821012345678)를 제출한다. 길이가 맞지 않으면 빈 값.
`autoComplete?: string = 'tel-national'`	—	—	번호 칸의 autocomplete 값. 국가를 따로 고르지 않는 폼은 'tel', 자동 완성을 막으려면 'off'(국가 select도 꺼짐).
`onValueChange?: ({ country, national, e164 }) => void`	—	—	국가나 번호가 바뀔 때마다 호출된다.
그 밖의 속성	—	—	네이티브 속성 대신 name(E.164 숨김 필드로 제출), id, onValueChange({ country, national, e164 })를 받는다. className·style은 받지 않는다.

개요

미리보기

예시 언어동작 줄이기

휴대전화 번호

CountryPhone number

label

hint

error

requireddisabledreadOnly

defaultCountry

defaultValue

예시

상태

비어 있음
휴대전화 번호
CountryPhone number
입력됨
휴대전화 번호
CountryPhone number
국가 변경 (US)
휴대전화 번호
CountryPhone number
도움말
휴대전화 번호
CountryPhone number
알림을 받을 번호예요. 소유 확인은 하지 않아요.
오류
휴대전화 번호
CountryPhone number
이 국가의 번호 형식과 맞지 않아요.
비활성
휴대전화 번호
CountryPhone number

이렇게 · 이렇게 하지 않기

이렇게 전화번호가 꼭 필요한 흐름에만 쓴다(출시 범위에는 없음). 국가는 국기 없이 국가 이름으로 보여준다. 형식이 맞아도 번호의 주인임을 뜻하지 않으므로 “확인됨”으로 표시하지 않는다.

이렇게 형식은 입력이 끝난 뒤(blur) 맞춘다. 입력 중에 바꾸면 커서가 튄다.

이렇게 하지 않기 IP로 국가를 추정하지 않는다. 검색 팝오버 대신 네이티브 select.

이렇게 하지 않기 형식 검사를 소유 확인처럼 표시하지 않는다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`휴대전화 번호`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`defaultCountry?`	`'KR' \| 'US' \| 'CN' \| 'ES' \| 'MX'`	`KR`	처음 국가. 생략하면 UI 로캘에서 고른다(ko→KR, en→US, zh→CN, es→ES). IP로 추정하지 않는다.
`defaultValue?`	`string`		국내 번호 초기값.
`name?: string`	—	—	숨김 필드로 E.164(+821012345678)를 제출한다. 길이가 맞지 않으면 빈 값.
`autoComplete?: string = 'tel-national'`	—	—	번호 칸의 autocomplete 값. 국가를 따로 고르지 않는 폼은 'tel', 자동 완성을 막으려면 'off'(국가 select도 꺼짐).
`onValueChange?: ({ country, national, e164 }) => void`	—	—	국가나 번호가 바뀔 때마다 호출된다.
그 밖의 속성	—	—	네이티브 속성 대신 name(E.164 숨김 필드로 제출), id, onValueChange({ country, national, e164 })를 받는다. className·style은 받지 않는다.

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기