31 / 47

Input OTP

인증번호를 한 칸에 한 글자씩 입력하는 칸입니다. 문자·이메일로 받은 6자리 코드 확인 화면에 씁니다.

Basic

여섯 칸짜리 인증번호 입력칸입니다. 한 글자 치면 다음 칸으로 자동으로 넘어갑니다.

1
2
3
4
5
6

Pattern

숫자만 받도록 제한합니다. 글자를 쳐도 입력되지 않습니다.

Separator

두 칸씩 묶고 사이에 구분선을 넣어 읽기 쉽게 합니다.

Disabled

입력을 막은 상태입니다. 이미 확인이 끝난 번호를 보여줄 때 씁니다.

1
2
3
4
5
6

Controlled

입력한 값을 아래 문장에 바로 보여줍니다. 값을 코드에서 직접 다루는 형태입니다.

인증번호를 입력하세요.

Invalid

번호가 틀렸을 때 칸 테두리가 빨갛게 바뀝니다.

0
0
0
0
0
0

Four Digits

네 자리 비밀번호처럼 칸 수를 줄인 형태입니다.

Alphanumeric

숫자와 영문자를 모두 받습니다. 초대 코드 입력에 씁니다.

Form

카드 안에 제목·설명·다시 보내기·확인 버튼까지 갖춘 실제 인증 화면입니다.

로그인 확인
이메일로 보낸 인증번호를 입력하세요: m@example.com

이 이메일에 더 이상 접근할 수 없어요.

로그인이 안 되나요? 고객 지원 문의

RTL

아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어용 배치입니다. 칸 순서가 뒤집힙니다.

1
2
3
4
5
6

칸 순서가 오른쪽에서 왼쪽으로 뒤집힙니다.