1<template>2 <div class="pin">3 <input v-for="(d,i) in digits" :key="i" v-model="digits[i]" maxlength="1" inputmode="numeric" />4 </div>5</template>6<script>7export default { data: () => ({ digits: ['4','2','',''] }) }8</script>9<style>10.pin{display:flex;gap:12px;font-family:system-ui}11.pin input{width:52px;height:60px;text-align:center;font-size:24px;font-weight:700;color:#fff;12 border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04);outline:none;transition:.2s}13.pin input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.2)}14</style>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Minimalistisches Feld mit animiertem Verlaufs-Unterstrich beim Fokus.
Premium Vue Command/Search Input mit animiertem Gradient-Ring, Floating Label, Live-Suggestions, Keyboard-Navigation, Clear-Button, Ladezustand, Statuszeile und sauberem v-model-Support. Funktioniert auch direkt in der Komponenten-Vorschau ohne externe Abhängigkeiten.