Formular Components und Eingabefelder

Inputs, Textareas, Selects, Checkboxen, Radios, Switches, Slider, Suchfelder und Formular-Layouts.

9 Components · 22 Variants

Kategorie wechseln

Jedes Feld, das ein Formular braucht

In Formularen bittet eine Website um etwas, und jedes Feld ist eine kleine Entscheidung für den Besucher. Die neun Components hier sind die Bausteine, jede mit sichtbarem Label, Hinweis, Fehler als Text und dem passenden Eingabetyp, damit Handys die richtige Tastatur zeigen.

Das Eingabefeld deckt Text, E-Mail, Telefon und Passwort ab, mit Icons und Anhängseln. Der Textbereich wächst mit dem Inhalt und zählt Zeichen. Die Auswahl ist eine Liste mit Suche und Gruppen oder das gestaltete native Feld für lange Listen am Handy. Kontrollkästchen, Optionsgruppe und Schalter regeln Auswahlen, der Schalter nur für Einstellungen, die sofort gelten. Der Schieberegler wählt einen Wert oder Bereich, das Suchfeld ergänzt Tastenkürzel und Leeren-Knopf, Formular-Layouts zeigen fertige Formulare aus allem zusammen.

Bau Formulare einspaltig, Menschen lesen von oben nach unten. Prüf ein Feld beim Verlassen, nicht bei jeder Taste. Sind fast alle Felder Pflicht, markiere die optionalen. Für lange Formulare hat das Kit ein mehrstufiges Formular, das jede Antwort behält.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Eingabefeld4
Formular-Layouts3
Optionsgruppe3
Kontrollkästchen2
Suchfeld2
Auswahl2
Schieberegler2
Schalter2
Textbereich2

input

Eingabefeld

Textfeld mit Label, Hinweis, Fehler als Text, Icons, Präfix, Suffix und Anhängseln.

Zustände
Icons und Anhängsel
Größen
Passwort

Props und Details

Zustände

Label, Hinweis, optional, Pflicht, Fehler, Erfolg und gesperrt. Der Fokusring blendet weich ein, ein Fehler schüttelt einmal, eine gültige Nummer zeichnet einen Haken. Fehler stehen als Text da, nie nur als Farbe.

Installv1.0.1

aiw add @ai-website/input

Bringt mit utils, kit, icon

Usage

<Input label="Work email" type="email" required hint="…" />  <Input label="Phone" error="Enter a number with at least 7 digits." />

Source

Icons und Anhängsel

Icon vorne, Präfix und Suffix im Feld, angehängte Segmente und ein Knopf im Feld.

Installv1.0.1

aiw add @ai-website/input

Bringt mit utils, kit, icon

Usage

<Input icon="search" trailing={<kbd>⌘K</kbd>} />  <Input startAddon="https://" />  <Input suffix="€" />

Source

Größen

Klein, mittel und groß, jeweils so hoch wie der Knopf derselben Größe. Das letzte hat ein schwebendes Label, 56 px hoch, es steigt beim Tippen auf.

Installv1.0.1

aiw add @ai-website/input

Bringt mit utils, kit, icon

Usage

<Input size="sm" />  <Input size="md" />  <Input size="lg" />  <Input floatingLabel label="Business email" />

Source

Passwort

Zeigen und verbergen mit beschriftetem Knopf, Link in der Labelzeile und Fehler.

Installv1.0.1

aiw add @ai-website/input

Bringt mit utils, kit, icon

Usage

<PasswordInput label="Password" labelAction={<a href="#">Forgot password?</a>} />

Source

form-layout

Formular-Layouts

Komplette Formulare aus den Kit-Feldern: Kontakt, Bewerbung und Einstellungen, mit Abschnitten, Raster und Aktionen.

Kontakt
Bewerbung
Einstellungen

Props und Details

Kontakt

Zwei Spalten auf breiten Bildschirmen, eine auf dem Telefon. Die Felder steigen beim Hereinscrollen nacheinander auf, Senden macht aus dem Knopf einen Haken.

Installv1.0.0

aiw add @ai-website/form-layout

Bringt mit utils, kit

Usage

<FormGrid><Input label="First name" />…</FormGrid><FormActions>…</FormActions>

Source

Bewerbung

Abschnitte untereinander, eine Fehlerübersicht mit Links zu jedem Feld, Upload und Tags. Senden mit offenen Fehlern schüttelt den Knopf und nennt, was fehlt.

Installv1.0.0

aiw add @ai-website/form-layout

Bringt mit utils, kit

Usage

<FormErrorSummary errors={…} /><FormSection title="About you">…</FormSection>

Source

Einstellungen

Titel und Erklärung ab Desktop links, Felder rechts, Aktionen am Ende.

Installv1.0.0

aiw add @ai-website/form-layout

Bringt mit utils, kit

Usage

<FormSection layout="side" title="General" description="…">…</FormSection>

Source

radio-group

Optionsgruppe

Eine Wahl aus wenigen, auf nativen Radios: als Liste, als Karten mit Preisen oder als Kacheln mit Icons.

Liste
Karten
Kacheln

Props und Details

Liste

Untereinander oder in einer Reihe. Der Punkt springt hinein, Pfeiltasten bewegen die Wahl, eine fehlende Antwort steht als Text da.

Installv1.0.1

aiw add @ai-website/radio-group

Bringt mit utils, kit, icon, input

Usage

<RadioGroup legend="Preferred contact" orientation="horizontal" options={…} />

Source

Karten

Jede Option eine Fläche mit Beschreibung, Preis und optionalem Etikett. Der Ring gleitet zur neuen Wahl und setzt mit leichtem Überschwingen auf.

Installv1.0.1

aiw add @ai-website/radio-group

Bringt mit utils, kit, icon, input

Usage

<RadioGroup variant="cards" legend="Delivery" options={[{ value, label, description, meta, tag }]} />

Source

Kacheln

Mittige Kacheln mit Icon für bildhafte Entscheidungen, ab Tablet drei nebeneinander.

Installv1.0.1

aiw add @ai-website/radio-group

Bringt mit utils, kit, icon, input

Usage

<RadioGroup variant="tiles" columns={3} legend="Workspace type" options={…} />

Source

checkbox

Kontrollkästchen

Echte Checkboxen im Kit-Look: Label, Beschreibung, gemischter Zustand, Gruppen, Karten und Fehler als Text.

Zustände und Gruppen
Karten

Props und Details

Zustände und Gruppen

Der Haken zeichnet sich, das Kästchen federt. „Alle wählen“ wird gemischt, wenn einige Zeilen an sind, eine Gruppe teilt sich Legende und Hinweis.

Installv1.0.1

aiw add @ai-website/checkbox

Bringt mit utils, kit, icon, input

Usage

<Checkbox label="…" description="…" indeterminate />  <CheckboxGroup legend="…">…</CheckboxGroup>

Source

Karten

Die ganze Option ist die Trefferfläche. Gewählte Karten bekommen eine weiche Akzentkante.

Installv1.0.1

aiw add @ai-website/checkbox

Bringt mit utils, kit, icon, input

Usage

<Checkbox variant="card" icon="shield" label="Priority support" description="…" />

Source

search-field

Suchfeld

Das Suchfeld mit Tastenkürzel, Leeren-Knopf, Escape zum Leeren, Ladezustand und Absendeknopf.

Suchfeld
In einer Kopfzeile

Props und Details

Suchfeld

Strg K oder ⌘K fokussiert es von überall und die Tasten drücken sich. Der Fokus weitet das Feld ein wenig, eine Eingabe bekommt einen Leeren-Knopf, eine laufende Suche einen Spinner.

Installv1.0.0

aiw add @ai-website/search-field

Bringt mit utils, kit, icon, input, loading-button

Usage

<SearchField shortcut="k" placeholder="Search the docs" />  <SearchField loading defaultValue="Atlas" />

Source

In einer Kopfzeile

Der weiche Stil ohne Rand sitzt ruhig in Leisten und wird beim Fokus hell.

Installv1.0.0

aiw add @ai-website/search-field

Bringt mit utils, kit, icon, input, loading-button

Usage

<SearchField variant="soft" size="sm" shortcut="k" />

Source

select

Auswahl

Die Kit-Liste mit Icons, Beschreibungen, Gruppen und voller Tastatur, dazu das gestylte native Select.

Liste
Nativ

Props und Details

Liste

Die Liste klappt aus dem Feld auf, die Zeilen folgen nacheinander, eine Markierung gleitet zur aktiven Zeile. Pfeile, Pos1, Ende und Tippen bewegen durch sie.

Installv1.0.1

aiw add @ai-website/select

Bringt mit utils, kit, icon, input, popover

Usage

<Select label="Plan" options={[{ value, label, description, meta }]} defaultValue="team" />

Source

Nativ

Das Browser-Select im Kit-Look. Am besten für lange Listen auf dem Telefon und in langen Formularen.

Installv1.0.1

aiw add @ai-website/select

Bringt mit utils, kit, icon, input, popover

Usage

<NativeSelect label="Country" options={[{ value, label }]} />

Source

slider

Schieberegler

Ein gestylter nativer Regler: ein Wert oder eine Spanne mit zwei Griffen, formatierte Werte und Marken.

Werte
Stufen und Marken

Props und Details

Werte

Der Wert im Format der Sprache, für Screenreader genauso vorgelesen. Die Füllung wächst beim Hereinscrollen, der Griff wächst beim Ziehen und eine Blase folgt ihm.

Installv1.0.1

aiw add @ai-website/slider

Bringt mit utils, kit

Usage

<Slider label="Monthly budget" min={500} max={10000} step={100} format={(v) => `${v} €`} />

Source

Stufen und Marken

Feste Stufen mit beschrifteten Marken für Entscheidungen, die eigentlich eine Skala sind.

Installv1.0.1

aiw add @ai-website/slider

Bringt mit utils, kit

Usage

<Slider min={0} max={3} step={1} marks={[{ value: 0, label: "Low" }, …]} />

Source

switch

Schalter

An und aus für Einstellungen, die sofort gelten, mit role="switch", als Liste oder als Zeilen.

Einstellungsliste
Zeilen mit Icons

Props und Details

Einstellungsliste

Label und Beschreibung links, der Schalter rechts, wie man es vom Telefon kennt. Der Knopf federt hinüber und zeichnet einen kleinen Haken.

Installv1.0.0

aiw add @ai-website/switch

Bringt mit utils, kit, icon

Usage

<Switch label="Email digest" description="…" defaultChecked />

Source

Zeilen mit Icons

Jede Einstellung auf eigener Fläche, mit einem Icon, das das Thema benennt.

Installv1.0.0

aiw add @ai-website/switch

Bringt mit utils, kit, icon

Usage

<Switch variant="row" icon="shield" label="Two-factor sign-in" description="…" />

Source

textarea

Textbereich

Mehrzeiliger Text, der mit dem Inhalt wächst, mit Zähler, Fußzeile und Fehler als Text.

Zustände
Eingabebox

Props und Details

Zustände

Wächst beim Tippen, der Zähler wird kurz vor der Grenze kräftig und darüber rot, und die Box schüttelt einmal, wenn du darüber gehst.

Installv1.0.0

aiw add @ai-website/textarea

Bringt mit utils, kit, input

Usage

<Textarea label="Your message" maxLength={500} hint="We reply within one working day." />

Source

Eingabebox

Eine Fußzeile mit Werkzeugen und Sendeknopf, wie bei Kommentaren und Chats.

Installv1.0.0

aiw add @ai-website/textarea

Bringt mit utils, kit, input

Usage

<Textarea aria-label="Add a comment" footer={<…tools…/>} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Forms und Inputs stehen.

Jedes Feld, das ein Formular braucht

Auf dieser Seite

Zustände

Icons und Anhängsel

Größen

Passwort

Kontakt

Bewerbung

Einstellungen

Liste

Karten

Kacheln

Zustände und Gruppen

Karten

Suchfeld

In einer Kopfzeile

Liste

Nativ

Werte

Stufen und Marken

Einstellungsliste

Zeilen mit Icons

Zustände

Eingabebox

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit