Pin Input
Pin Input (핀 입력)
사용자로부터 PIN 코드나 OTP를 입력받는 컴포넌트예요. 단일 코드·마스크·자동 제출·구분자 등을 지원해요.
출처: 문서
본문
사용법 (Usage)
import { PinInput } from "@chakra-ui/react"
<PinInput.Root>
<PinInput.HiddenInput />
<PinInput.Control>
<PinInput.Input />
</PinInput.Control>
</PinInput.Root>
:::info
폐쇄형 컴포넌트 구성을 선호한다면 아래 스니펫을 확인해 보세요.
:::
예제 (Examples)
크기 (Sizes)
PinInput.Root 컴포넌트에 size prop을 전달해 핀 입력 컴포넌트의 크기를 변경해요.
일회용 코드 (One time code)
PinInput.Root 컴포넌트에 otp prop을 전달해 핀 입력 컴포넌트가 일회용 코드 입력처럼 동작하게 해요. OTP 코드 입력 시 사용자 경험을 개선하는 데 도움이 돼요.
자동 제출 (Auto Submit)
autoSubmit prop을 사용해 모든 입력이 채워졌을 때 소속 폼을 자동으로 제출해요.
붙여넣은 값 정리 (Sanitize Pasted Values)
sanitizeValue prop을 사용해 검증 전에 붙여넣은 값에서 대시나 공백 같은 형식을 제거해요.
마스크 (Mask)
PinInput.Root 컴포넌트에 mask prop을 전달해 입력된 PIN 코드를 가려요.
플레이스홀더 (Placeholder)
PinInput.Root 컴포넌트에 placeholder prop을 전달해 핀 입력에 플레이스홀더를 추가해요.
필드 (Field)
Field와 PinInput 컴포넌트를 조합하는 예시예요.
Hook Form
Field와 PinInput 컴포넌트를 react-hook-form과 함께 조합하는 예시예요.
제어 (Controlled)
PinInput.Root 컴포넌트에 value와 onValueChange prop을 전달해 핀 입력 값을 제어해요.
스토어 (Store)
핀 입력을 제어하는 또 다른 방법은 RootProvider 컴포넌트와 usePinInput 스토어 훅을 사용하는 것이에요.
이렇게 하면 컴포넌트 외부에서도 핀 입력 상태와 메서드에 접근할 수 있어요.
붙이기 (Attached)
PinInput.Root 컴포넌트에 attached prop을 전달해 핀 입력을 입력 필드에 붙여요.
구분자와 함께 (With separator)
각 세그먼트를 attached 상태의 Group으로 감싸고, PinInput.Control의 세그먼트 사이에 구분자를 추가하며, PinInput.Root의 count에 입력 개수를 설정해요.
영숫자 (Alphanumeric)
PinInput.Root 컴포넌트에 type prop을 전달해 사용자가 영숫자 문자를 입력할 수 있게 해요. 값은 alphanumeric, numeric, alphabetic 중 하나일 수 있어요.
폐쇄형 컴포넌트 (Closed Component)
핀 입력을 폐쇄형 컴포넌트 구성으로 설정하는 방법이에요.
사용법 (Usage)
<PinInput mask />
Props
Root
PinInput 컴포넌트의 Root 부분에 대한 prop 테이블 (대화형 문서 참고).