PinInput

이메일로 받은 일회용 코드를 칸에 나눠 입력.

개요

미리보기

예시 언어동작 줄이기

인증 코드 6 digits

label

hint

error

requireddisabledreadOnly

length

mask

defaultValue

이렇게 한 칸씩 나뉘어 보여도 입력은 하나로 다룬다. 붙여넣기를 막지 않고 칸에 나눠 넣는다. 모두 입력한 것과 서버가 받아들인 것은 다르므로 결과는 서버 응답 뒤에 알린다.
이렇게 다 입력해도 자동 제출하지 않는다. 사용자가 확인 버튼을 누른다. 결과는 FieldMessage로.
이렇게 하지 않기 칸마다 input을 두지 않는다. 하나의 input, 하나의 Tab 정지점.
이렇게 하지 않기 “완료”를 확인처럼 표시하지 않는다. 자릿수가 찼다는 뜻일 뿐이다.

이름	타입	기본값	설명
`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`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`length?`	`4 \| 6 \| 8`	`6`	자릿수. 라벨 옆에 “6자리”로 자동 표시된다.
`mask?`	`boolean`	`false`	숫자 대신 점(PIN). one-time-code 자동 완성을 끈다.
`defaultValue?`	`string`		비제어 초기값(숫자만 남김).
`value?: string · onValueChange?: (value: string) => void`	—	—	제어 모드. 숫자가 아닌 글자는 버린다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.

예시

이렇게 · 이렇게 하지 않기

이렇게 한 칸씩 나뉘어 보여도 입력은 하나로 다룬다. 붙여넣기를 막지 않고 칸에 나눠 넣는다. 모두 입력한 것과 서버가 받아들인 것은 다르므로 결과는 서버 응답 뒤에 알린다.

이렇게 다 입력해도 자동 제출하지 않는다. 사용자가 확인 버튼을 누른다. 결과는 FieldMessage로.

이렇게 하지 않기 칸마다 input을 두지 않는다. 하나의 input, 하나의 Tab 정지점.

이렇게 하지 않기 “완료”를 확인처럼 표시하지 않는다. 자릿수가 찼다는 뜻일 뿐이다.

토큰과 속성

이름	타입	기본값	설명
`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`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`length?`	`4 \| 6 \| 8`	`6`	자릿수. 라벨 옆에 “6자리”로 자동 표시된다.
`mask?`	`boolean`	`false`	숫자 대신 점(PIN). one-time-code 자동 완성을 끈다.
`defaultValue?`	`string`		비제어 초기값(숫자만 남김).
`value?: string · onValueChange?: (value: string) => void`	—	—	제어 모드. 숫자가 아닌 글자는 버린다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.