InputOtp beta ​

<template>
  <div>
    <el-input-otp v-model="otp" />
    <div style="margin-top: 20px">Value: {{ otp }}</div>
  </div>
</template>

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

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

<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>

<style scoped>
.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

<template>
  <div class="demo-input-otp">
    <div>
      <p>Outlined (Default)</p>
      <el-input-otp v-model="otp1" type="outlined" />
    </div>
    <div>
      <p>Filled</p>
      <el-input-otp v-model="otp2" type="filled" />
    </div>
    <div>
      <p>Underlined</p>
      <el-input-otp v-model="otp3" type="underlined" />
    </div>
  </div>
</template>

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

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

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

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

<template>
  <div class="demo-input-otp">
    <div>
      <p>Large</p>
      <el-input-otp v-model="otp1" size="large" />
    </div>
    <div>
      <p>Default</p>
      <el-input-otp v-model="otp2" size="default" />
    </div>
    <div>
      <p>Small</p>
      <el-input-otp v-model="otp3" size="small" />
    </div>
  </div>
</template>

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

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

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

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

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

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

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

<style scoped>
.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);
}
</style>

<template>
  <div>
    <el-input-otp v-model="otp" mask />
    <div style="margin-top: 20px">Value: {{ otp }}</div>
  </div>
</template>

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

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

<template>
  <div class="demo-input-otp">
    <el-input-otp separator="/" />
    <el-input-otp :separator="castSeparator" />
    <el-input-otp>
      <template #separator>•</template>
    </el-input-otp>
  </div>
</template>

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

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

<style scoped>
.demo-input-otp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

<template>
  <div class="demo-input-otp">
    <div>
      <p>Numbers only</p>
      <el-input-otp
        v-model="otp1"
        :validator="onlyAllowNumber"
        inputmode="numeric"
      />
    </div>
    <div>
      <p>Letters only</p>
      <el-input-otp v-model="otp2" :validator="onlyAllowLetter" />
    </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>

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

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