Code-Eingabe
Verifizierungs-Code-Eingabe (4/6/8 Stellen): Einzelzellen mit Auto-Weiterspringen, Backspace zurück, Einfügen verteilt — der Wert landet gesammelt in einem versteckten Feld
Beispiele
Sechsstelliger Bestätigungscode
BestätigungscodeWir haben dir einen Code per E-Mail geschickt.
Vierstellig, Fehlerzustand
Der Code ist abgelaufen — neuen anfordern.
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Beschriftung |
| name | string | "code" | Feldname (verstecktes Sammelfeld) |
| length | string: 4 | 6 | 8 | "6" | Stellen |
| invalid | boolean | false | Fehlerzustand |
| hint | string | "" | Hinweis |
* Pflicht-Prop
Events & Slots
Events:
⚡ complete — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--code-input-border | var(--form-border, var(--color-border-default)) |
--code-input-background | var(--form-background, var(--color-surface-default)) |
Genutzte Design-Tokens
border.hairlinecolor.border.defaultcolor.border.errorcolor.status.dangercolor.surface.defaultcolor.text.defaultcolor.text.mutedfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultfont.family.monoform.backgroundform.borderradius.controlsize.10size.12size.2text.mdtext.smtext.xlweight.semibold