Pin Input experimental

Ark UI Pin Input 기반 wrapper입니다. OTP/인증번호 입력을 위해 한 칸씩 분리된 정사각형 입력 필드를 제공하며, 붙여넣기·자동 포커스 이동·키보드 내비게이션은 Ark UI primitive가 처리합니다.

@ark-ui/svelte/pin-input Ark UI docs ↗

문자로 받은 인증번호 4자리

<script lang="ts">
  import * as PinInput from '@odbd/svelte/pin-input'
</script>

<PinInput.Root otp style="inline-size: fit-content; margin-inline: auto;">
  <PinInput.Label>문자로 받은 인증번호 4자리</PinInput.Label>
  <PinInput.Control>
    {#each Array(4) as _, index}
      <PinInput.Input {index} />
    {/each}
  </PinInput.Control>
  <PinInput.HiddenInput />
</PinInput.Root>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import * as PinInput from '@odbd/svelte/pin-input'

import { PinInput } from '@odbd/react/pin-input'