Skip to content

Instantly share code, notes, and snippets.

@joshdales
joshdales / code_input.svelte
Last active March 28, 2025 01:31
Multi-digit code input in built Svelte
<script lang="ts">
import type { ClipboardEventHandler, KeyboardEventHandler } from "svelte/elements"
let { codeLength } = $props<{ codeLength: number }>()
let code = $state<(number | null)[]>(new Array(codeLength).fill(null))
const handlePaste: ClipboardEventHandler<HTMLFieldSetElement> = (event) => {
event.preventDefault()
const pastedData = event.clipboardData?.getData("text")
if (!pastedData) return
@joshdales
joshdales / CodeInput.css
Last active March 26, 2025 12:59
One of those multi-digit code inputs built in React
fieldset {
display: flex;
gap: 1ch;
border: none;
padding: 0;
margin: 0;
justify-content: center;
}
input {

Keybase proof

I hereby claim:

  • I am joshdales on github.
  • I am joshdales (https://keybase.io/joshdales) on keybase.
  • I have a public key ASBmDRf9SvTHTi3jg9nHlmQHYQIiwDOXN1KjJm9uWwrQ-wo

To claim this, I am signing this object: