Pin Input

여러 한 글자 입력 칸을 연결해 짧은 인증 번호를 입력합니다.

용법

인증 번호

짧은 숫자 인증 번호를 한 칸씩 입력합니다.

<!-- Pin Input / Verification Code -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" label="Verification code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

입력 칸 수 설정

서비스에서 요구하는 번호 형식에 맞게 입력 칸 수를 설정합니다.

<!-- Pin Input / Custom Length -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="4" label="Four-digit PIN">
    <PinInputInput v-for="index in 4" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

입력값 가리기

입력한 번호가 화면에 계속 보이면 안 될 때 문자를 가립니다.

<!-- Pin Input / Masked -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" mask label="Security code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

입력 칸 자리표시자

자리표시자를 입력값과 분리해 각 입력 칸에 전달합니다.

<!-- Pin Input / Placeholders -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" label="Access code">
    <PinInputInput
      v-for="index in 6"
      :key="index"
      :index="index - 1"
      placeholder="○"
    />
  </PinInputRoot>
</template>

OTP 자동 완성

입력값이 실제 일회용 인증 번호일 때만 OTP 자동 완성을 명시적으로 켭니다.

<!-- Pin Input / Otp -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" :otp="true" label="One-time code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

읽기 전용

포커스로 값을 확인하고 모든 변경 요청을 읽기 전용 상태로 처리합니다.

<!-- Pin Input / Readonly -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" default-value="246810" readonly label="Assigned code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

비활성 항목

비활성 상태에서 키보드와 포인터 입력을 차단합니다.

<!-- Pin Input / Disabled -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" default-value="593174" disabled label="Unavailable code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

<!-- Pin Input / Controlled -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
import { ref } from 'vue'

const value = ref('')

</script>

<template>
  <PinInputRoot v-model="value" :length="6" label="Controlled code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
  <p>Current value: {{ value || 'Empty' }}</p>
</template>

API

Vue 패키지: @sectile/vue/pin-input

컴포넌트

PinInputRoot
PinInputInput

Props

`PinInputRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue: 타입string기본값''
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
form: 타입string기본값undefined
컨트롤을 연결할 네이티브 form 요소의 ID입니다.
label: 타입string기본값'PIN'
보조 기술이 읽는 컨트롤 이름입니다.
length: 타입number기본값6
서로 연결된 한 글자 입력의 개수입니다.
mask: 타입boolean기본값false
입력한 문자를 비밀번호 형태로 가릴지 여부입니다.
modelValue: 타입string기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
name: 타입string기본값undefined
네이티브 폼 제출에 사용할 이름입니다.
otp: 타입boolean기본값false
첫 입력에서 일회용 코드 자동 완성을 명시적으로 사용할지 여부입니다.
policies: 타입PinInputPolicies기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.
required: 타입boolean기본값false
제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.

`PinInputInputProps`

as: 타입PrimitiveAs기본값'input'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
index: 타입number기본값필수
부모 컬렉션 안에서 이 파트의 0부터 시작하는 위치입니다.

슬롯

`PinInputRootSlotProps`

complete: 타입boolean
필요한 모든 문자 또는 단계가 완료됐는지 여부입니다.
disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

`PinInputInputSlotProps`

character: 타입string
이 입력 칸에 표시된 문자입니다.
complete: 타입boolean
필요한 모든 문자 또는 단계가 완료됐는지 여부입니다.
disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
index: 타입number
부모 컬렉션 안의 0부터 시작하는 위치입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

이벤트

`PinInputRoot`

complete: 페이로드string
필요한 모든 입력 칸이 채워질 때 발생합니다.
update:modelValue: 페이로드string
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`PinInputValueChangeHandler`

type PinInputValueChangeHandler = (value: string) => void

`PinInputCompleteHandler`

type PinInputCompleteHandler = (value: string) => void

파트

공통 범위: [data-scope="pin-input"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`input`	`[data-part="input"]`	편집 값이나 초안을 입력받습니다.	—

키보드 동작

키	동작
`Arrow Left` / `Arrow Right`	숫자 입력란 사이를 이동합니다.
`Backspace` / `Delete`	숫자를 지우고 기대되는 커서 이동을 유지합니다.
`Text input`	올바른 문자를 받고 입력이 끝나면 다음 칸으로 이동합니다.

접근성

각 숫자 입력에 독립적인 이름을 제공하고 예측 가능한 포커스 순서를 유지합니다.

Pin Input ​

용법 ​

인증 번호 ​

입력 칸 수 설정 ​

입력값 가리기 ​

입력 칸 자리표시자 ​

OTP 자동 완성 ​

읽기 전용 ​

비활성 항목 ​

외부 상태 관리 ​

API ​

Props ​

PinInputRootProps ​

PinInputInputProps ​

슬롯 ​

PinInputRootSlotProps ​

PinInputInputSlotProps ​

이벤트 ​

PinInputRoot ​

기타 타입 ​

PinInputValueChangeHandler ​

PinInputCompleteHandler ​

파트 ​

키보드 동작 ​

접근성 ​