Field with OTP input

<script setup lang="ts">
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <Field>
        <FieldLabel for="verification-method">
          Verification Method
        </FieldLabel>
        <NativeSelect id="verification-method">
          <NativeSelectOption value="email" selected>Email Address</NativeSelectOption>
          <NativeSelectOption value="sms">
            SMS Text Message
          </NativeSelectOption>
          <NativeSelectOption value="app">
            Authenticator App
          </NativeSelectOption>
        </NativeSelect>
        <FieldDescription>
          Choose how you want to receive your security code.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel for="otp-code">Security Code</FieldLabel>
        <InputOTP id="otp-code" :maxlength="6">
          <InputOTPGroup>
            <InputOTPSlot :index="0" />
            <InputOTPSlot :index="1" />
            <InputOTPSlot :index="2" />
          </InputOTPGroup>
          <InputOTPSeparator />
          <InputOTPGroup>
            <InputOTPSlot :index="3" />
            <InputOTPSlot :index="4" />
            <InputOTPSlot :index="5" />
          </InputOTPGroup>
        </InputOTP>
        <FieldDescription>
          Enter the 6-digit code to verify your identity.
        </FieldDescription>
      </Field>
    </FieldGroup>
  </div>
</template>