InputOtp

The filled type matches Arco VerificationCode; the default outlined type keeps the Element Plus form. See the Element Plus docs for props.

Filled Code

Use type="filled" for Arco-style cells and size to adjust their dimensions.

<script setup lang="ts">
import { ref } from 'vue'
const code = ref('12')
</script>

<template>
  <el-input-otp v-model="code" type="filled" />
  <el-input-otp type="filled" size="small" disabled model-value="123456" />
</template>

Other Types

Arco has no outlined or underlined equivalent; both keep the Element Plus form.

<script setup lang="ts">
import { ref } from 'vue'
const outlined = ref('12')
const underlined = ref('12')
</script>

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

Differences from Arco

• Cells use fixed gaps instead of Arco's evenly distributed layout.
• Focus behavior follows Element Plus; outlined and underlined have no Arco equivalent.