InputOtp

InputOtp

출처: 문서

본문

InputOtp beta

일회용 비밀번호(OTP)를 입력할 때 사용하는 컴포넌트예요. 인증 코드처럼 여러 자리 숫자를 한 칸씩 나눠 입력받을 때 쓰면 좋아요.

기본 사용 (Basic Usage)

v-model로 값을 바인딩해요. 기본 예시에서는 123이라는 값을 가진 상태예요.

<template>
  <el-input-otp v-model="otp" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const otp = ref('123')
</script>

커스텀 길이 (Custom Length)

length prop을 설정해 입력 필드의 개수를 커스텀할 수 있어요.

<template>
  <div class="demo-input-otp">
    <el-input-otp v-model="otp1" :length="4" />
    <el-input-otp v-model="otp2" :length="8" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const otp1 = ref('')
const otp2 = ref('')
</script>

.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

타입 (Types)

세 가지 타입이 있어요: outlined(기본), filled, underlined이에요.

<template>
  <div class="demo-input-otp">
    <div>
      <p>Filled</p>
      <el-input-otp v-model="otp2" type="filled" />
    </div>
    <div>
      <p>Underlined</p>
      <el-input-otp v-model="otp3" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const otp1 = ref('')
const otp2 = ref('')
const otp3 = ref('')
</script>

.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

p {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

크기 (Sizes)

세 가지 크기가 있어요: large, default, small이에요. size prop으로 전환할 수 있어요.

비활성 & 읽기 전용 (Disabled & Readonly)

비활성(disabled) 및 읽기 전용(readonly) 상태를 지원해요.

<template>
  <div class="demo-input-otp">
    <div>
      <p>Disabled</p>
      <el-input-otp v-model="otp1" disabled />
    </div>
    <div>
      <p>Readonly</p>
      <el-input-otp v-model="otp2" readonly />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const otp1 = ref('123')
const otp2 = ref('456')
</script>

.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.type-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

p {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

마스킹 (Mask)

mask prop을 사용해 입력된 문자를 숨길 수 있어요. 비밀번호처럼 화면에 •로 표시돼요.

구분자 (Separator)

OTP 필드 사이의 구분자를 커스터마이즈할 수 있어요. separator prop에 문자열이나 렌더링 함수를 넘기면 돼요.

<template>
  <el-input-otp v-model="otp" :separator="castSeparator" />
</template>

<script setup lang="ts">
import { h, ref } from 'vue'

const otp = ref('')

const castSeparator = (index: number) => {
  return index & 1 ? h('span', null, '—') : ''
}
</script>

.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

커스텀 검증 (Custom Validation)

validator prop을 설정해 입력 문자를 검증하고, inputmode로 키보드 타입을 지정할 수 있어요.

<template>
  <div class="demo-input-otp">
    <div>
      <p>Number only</p>
      <el-input-otp v-model="otp1" :validator="onlyAllowNumber" />
    </div>
    <div>
      <p>Letters only</p>
      <el-input-otp v-model="otp2" :validator="onlyAllowLetter" inputmode="latin" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const otp1 = ref('')
const otp2 = ref('')

const onlyAllowNumber = (value: string) => /^\d$/.test(value)
const onlyAllowLetter = (value: string) => /^[a-zA-Z]$/.test(value)
</script>

.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

p {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

API

Attributes

Events

Slots

Exposes

더 알아보기 (Learn more)