Auth Code Input

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { AuthCodeInput, create_auth_code_input_manager } from "sveltekit-ui"

  let completed_code = $state("")

  const manager = create_auth_code_input_manager({
    name: "verification_code",
    is_required: true,
    on_sixth: (code) => { completed_code = code },
  })
</script>

<label for={"auth_code_input_" + manager.id}>Six-digit verification code</label>
<AuthCodeInput {manager} />
{#if completed_code && manager.is_valid}<p role="status">Ready to verify {completed_code} with your server.</p>{/if}