Eingabefelder

Text field

Text field: Ein einzeiliges Textfeld mit weichem Rand, einem Akzentfokusring, einem stummgeschalteten Platzhalter und einem ordnungsgemäßen Deaktivierungsstatus.

Text field verwenden

Text field verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`placeholder`	`text`	`you@example.com`	Bis zu 40 Zeichen
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`disabled`	`boolean`	`false`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Text field verfügbar?

Text field ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Text field?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: clsx.

Welche Details zur Barrierefreiheit sind in Text field erkennbar?

Der React-Quellcode von Text field enthält: native Elemente (input). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Text field reduzierte Bewegung?

Die Quellcode-Analyse fand in der index.tsx von Text field keine direkte Abfrage über useReducedMotion() oder matchMedia. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Focus ring text input von Fieldbook aus der Kategorie Eingabefelder.

2356Focus ring text inputEingabefelderEin einzeiliges Textfeld mit einem gedämpften Platzhalter und einem durchgehenden Akzentring, der nur bei Fokus angezeigt wird.

Standbild der UI-Komponente Auto Grow Textarea von Fieldbook aus der Kategorie Eingabefelder.

2792Auto Grow TextareaEingabefelderEin mehrzeiliges Textfeld, das größer wird, wenn die Person mehr tippt, anstatt in einem festen Feld zu scrollen.

Standbild der UI-Komponente Single value slider von Fieldbook aus der Kategorie Eingabefelder.

2791Single value sliderEingabefelderEin horizontaler Schieberegler mit einem verschiebbaren Daumen, der die Spur dahinter ausfüllt, sodass der aktuelle Wert auf einen Blick ablesbar ist.

Standbild der UI-Komponente Addon Input Group von Fieldbook aus der Kategorie Eingabefelder.

2297Addon Input GroupEingabefelderEin Textfeld, das von einer umrandeten Hülle umgeben ist, die ein führendes Symbol, eine nachgestellte Schaltfläche oder Text enthalten kann und einen gemeinsamen Fokusring für die gesamte Gruppe aufweist.

Standbild der UI-Komponente Character budget counter von Fieldbook aus der Kategorie Eingabefelder.

2760Character budget counterEingabefelderEin Schreibfeld mit einer Anzeige für die verbleibenden Zeichen, die auf eine Feder schlägt und sich in der Farbe erwärmt, wenn das Budget aufgebraucht ist.

Standbild der UI-Komponente Elastic tug slider von Fieldbook aus der Kategorie Eingabefelder.

2795Elastic tug sliderEingabefelderEin Schieber, der sich wie ein Gummiband dehnt, wenn er über seine Enden gezogen wird, und den Track nach dem Loslassen mit einem Sprung zurückschnappt.