Code-Eingabe — component.code-input
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
Componentv1.0.0Formulareweb.documentweb.applicationdesktop.shell
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 |
|---|---|---|
label | string | "" |
name | string | "code" |
length | string: 4 | 6 | 8 | "6" |
invalid | boolean | false |
hint | string | "" |
Events & Slots
Events: complete
Stellschrauben (Komponenten-Tokens)
| 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.hairline color.border.default color.border.error color.status.danger color.surface.default color.text.default color.text.muted focus.ring-color focus.ring-offset focus.ring-width font.family.default font.family.mono form.background form.border radius.control size.10 size.12 size.2 text.md text.sm text.xl weight.semibold