Picker und Auswahlfelder

Datum, Uhrzeit und Farbe wählen, Zahlenfelder, Comboboxen, Mehrfachauswahl und Tag-Felder, jede Wahl bleibt im Blick.

7 Components · 21 Variants

Kategorie wechseln

Auf dieser Seite

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

Zeitauswahl5
Farbwähler4
Mehrfachauswahl4
Zahlenfeld4
Datumsfeld2
Combobox1
Tag-Eingabe1

time-picker

Zeitauswahl

Eine Uhrzeit wählen, als Feld mit Segmenten, als Liste in Schritten mit Dauer, als Walzen, als Zifferblatt oder als Von-bis-Bereich. Deutsch in 24 Stunden, Englisch mit AM und PM.

Feld
Liste
Walzen
Zifferblatt
Von bis

Props und Details

Feld

Stunden und Minuten sind Spinbuttons. 7 4 5 tippen, und das Feld springt von selbst weiter, Pfeile gehen in Schritten, die Rücktaste zurück. Ein leeres Feld zeigt, was es erwartet, eine Zeit vor der Öffnung erklärt sich.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/time-picker

Bringt mit utils, kit, icon, input, select

Usage

<TimePicker label="Pickup" defaultValue="07:45" />

Source

Liste

Zeiten in Schritten von 15 oder 30 Minuten, Tippen springt zur Zeit. Die Liste fürs Ende zeigt die Dauer ab Beginn, ein früheres Ende wird markiert, ein späterer Beginn nimmt das Ende mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/time-picker

Bringt mit utils, kit, icon, input, select

Usage

<TimePicker variant="list" label="Ends" step={15} durationFrom={start} />

Source

Walzen

Walzen, die einrasten, wie auf dem Telefon. Wischen, eine Zeile antippen oder Pfeiltasten nutzen, das Band markiert die Wahl und der Satz darunter folgt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/time-picker

Bringt mit utils, kit, icon, input, select

Usage

<TimePicker variant="wheel" label="Remind me at" step={5} defaultValue="06:30" />

Source

Zifferblatt

Den Zeiger auf die Stunde ziehen, danach geht es zu den Minuten. Der Zeiger nimmt den kurzen Weg, Pfeile gehen in Schritten, der Hinweis daneben wechselt bei später Ankunft.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/time-picker

Bringt mit utils, kit, icon, input, select

Usage

<TimePicker variant="dial" label="Arrival" step={5} defaultValue="16:30" />

Source

Von bis

Beginn und Ende in einem Feld mit der Dauer. Ein verschobener Beginn behält die Dauer, ein Ende nach Mitternacht sagt Folgetag. Hier als Öffnungszeiten mit Schalter je Tag.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/time-picker

Bringt mit utils, kit, icon, input, select

Usage

<TimePicker variant="range" label="Tuesday" defaultValue="08:00" defaultEndValue="18:00" />

Source

color-picker

Farbwähler

Eine Farbe aus benannten Feldern wählen, in einem Editor mit Fläche, Farbton, Pipette und HEX, RGB oder HSL, oder aus einer Farbe eine Skala mit Kontrastwerten machen.

Farbfelder
Popover
Editor im Fluss
Palette

Props und Details

Farbfelder

Benannte Farbfelder als Radiogruppe, Pfeile bewegen und wählen. Der Regenbogenring öffnet den Farbdialog des Systems, das Hexfeld nimmt jede Farbe, die gezeichnete Seite übernimmt sie sofort.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/color-picker

Bringt mit utils, kit, icon, input, popover, copy-button

Usage

<ColorPicker label="Accent color" swatches={[{ value: "#1E6FD9", label: "Ocean" }, …]} defaultValue="#1E6FD9" />

Source

Popover

Ein Auslöser mit Farbfeld und Hex, ein Panel mit Fläche für Sättigung und Helligkeit, Farbtonregler, vorher und nachher, Pipette, wo der Browser sie hat, und zuletzt genutzte Farben.

Im Studio öffnen

Editor im Fluss

Der ganze Editor auf der Seite, mit Umschalter zwischen HEX, RGB und HSL. Pfeile bewegen die Fläche, Umschalt in großen Schritten, ein Kalendereintrag zeigt die Farbe mit lesbarer Schrift.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/color-picker

Bringt mit utils, kit, icon, input, popover, copy-button

Usage

<ColorPicker variant="inline" label="Event color" formats={["hex", "rgb", "hsl"]} defaultValue="#7A4BC2" />

Source

Palette

Aus einer Farbe werden zehn Stufen von 50 bis 900, jede mit Kontrastwert zur lesbaren Schrift und WCAG-Stufe. Ein Tipp kopiert den Hexwert, die Stufen wachsen beim Darüberfahren ein wenig.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/color-picker

Bringt mit utils, kit, icon, input, popover, copy-button

Usage

<ColorPicker variant="palette" label="Brand scale" defaultValue="#1E6FD9" />

Source

multi-select

Mehrfachauswahl

Mehrere Werte wählen, mit Suche, Gruppen, Anzahlen und Grenze. Als Chips im Feld, als Filterknopf, als offene Facettenliste oder als Stapel von Personen.

Chips
Filterknopf
Facettenliste
Stapel

Props und Details

Chips

Die gewählten Werte stehen als Chips im Feld, Tippen filtert die gruppierte Liste. Chips federn herein, die Rücktaste entfernt den letzten, ein Zähler zeigt den Rest.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/multi-select

Bringt mit utils, kit, icon, avatar, input, select, popover

Usage

<MultiSelect label="Skills" options={skills} defaultValue={["research", "a11y"]} max={5} />

Source

Filterknopf

Ein Knopf, der den Filter und die Auswahl nennt, ein Panel mit Suche, Anzahlen, Alle wählen und Entfernen. Die Tabelle darunter folgt jeder Änderung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/multi-select

Bringt mit utils, kit, icon, avatar, input, select, popover

Usage

<MultiSelect variant="popover" triggerLabel="Status" options={statuses} value={status} onValueChange={setStatus} />

Source

Facettenliste

Immer offen, für Seitenleisten in Shop und Suche. Eine kleine Suche, Anzahlen je Wert, die ersten Zeilen mit Alle zeigen, und die Trefferzahl zählt mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/multi-select

Bringt mit utils, kit, icon, avatar, input, select, popover

Usage

<MultiSelect variant="list" label="Material" options={materials} visible={5} />

Source

Stapel

Suche im Feld, die gewählten Personen darunter gestapelt, mit Rolle und Entfernen. Eine Grenze von drei, wer abwesend ist, steht da, lässt sich aber nicht wählen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/multi-select

Bringt mit utils, kit, icon, avatar, input, select, popover

Usage

<MultiSelect variant="stack" label="Reviewers" options={people} max={3} />

Source

number-input

Zahlenfeld

Ein Zahlenfeld nach dem Spinbutton-Muster, in vier Formen. Es zählt in Schritten, hält seine Grenzen, wiederholt beim Gedrückthalten und liest das Zahlenformat der Sprache.

Stepper
Geteilt
Menge im Warenkorb
Ziehen

Props und Details

Stepper

Knöpfe übereinander am Ende, auf dem Telefon zwei breite nebeneinander. Pfeiltasten gehen einen Schritt, Umschalt oder Bildtasten zehn, Pos1 und Ende springen an die Grenzen. Die Summe folgt jeder Änderung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/number-input

Bringt mit utils, kit, icon, input

Usage

<NumberInput label="Copies" min={25} max={5000} step={25} defaultValue={250} unit="pcs" />

Source

Geteilt

Minus und Plus an beiden Seiten, für Anzahlen, die man lieber antippt als eintippt. Die Grenzen hängen voneinander ab, der Balken zeigt die belegten Betten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/number-input

Bringt mit utils, kit, icon, input

Usage

<NumberInput variant="split" aria-label="Adults" min={1} max={8} defaultValue={2} />

Source

Menge im Warenkorb

Kompakt für Warenkorbzeilen. Am Minimum wird das Minus zum Papierkorb, eine entfernte Zeile hinterlässt ein Rückgängig, und die Zwischensumme zählt mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/number-input

Bringt mit utils, kit, icon, input

Usage

<NumberInput variant="quantity" aria-label="Quantity" min={1} max={3} hint="Only 3 left" onRemove={() => remove(line.id)} />

Source

Ziehen

Das Feld aus Gestaltungswerkzeugen. Den Buchstaben oder den Namen seitlich ziehen ändert den Wert, mit Umschalt in großen, mit Alt in feinen Schritten, oder einfach tippen. Eine Haarlinie zeigt, wo der Wert in seinem Bereich steht, die Vorschau folgt sofort.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/number-input

Bringt mit utils, kit, icon, input

Usage

<NumberInput variant="scrub" label="Radius" min={0} max={40} defaultValue={14} unit="px" />

Source

date-input

Datumsfeld

Datum im Format der Sprache tippen oder im Kalender mit voller Tastatur wählen. Auch als Zeitraum.

Feld und Kalender
Zeitraum

Props und Details

Feld und Kalender

Der Kalender klappt aus dem Feld auf, die Wochen kommen nacheinander und der gewählte Tag gleitet an seinen neuen Platz. Wochenenden sind gesperrt, Alt und Pfeil nach unten öffnen ihn per Tastatur.

Installv1.0.1

aiw add @ai-website/date-input

Bringt mit utils, kit, icon, input, popover

Usage

<DateInput label="Start date" defaultValue="2026-10-22" isDisabled={weekend} />

Source

Zeitraum

Ab Tablet zwei Monate nebeneinander, auf dem Telefon einer. Tage mit Buchungen tragen einen Punkt.

Installv1.0.1

aiw add @ai-website/date-input

Bringt mit utils, kit, icon, input, popover

Usage

<Calendar mode="range" months={2} range={range} onRangeChange={setRange} />

Source

combobox

Combobox

Ein Textfeld, das beim Tippen filtert, Akzente ignoriert, den Treffer markiert und neue Einträge anlegen kann.

Props und Details

Filtern beim Tippen

Treffer in Name und Beschreibung, der getippte Teil markiert, neue Zeilen kommen nacheinander und die Markierung gleitet mit den Pfeiltasten. Escape schließt, ein zweites Escape leert.

Installv1.0.1

aiw add @ai-website/combobox

Bringt mit utils, kit, icon, input, select, popover

Usage

<Combobox label="Office location" options={cities} placeholder="Search a city" />

Source

tag-input

Tag-Eingabe

Mehrere Werte in einem Feld: Enter oder Komma fügt hinzu, zweimal Rücktaste entfernt, eingefügte Listen teilen sich selbst.

Props und Details

Tags

Vorschläge zum Antippen, eine Höchstzahl, eine Prüfung je Tag und ein Fehler als Text. Neue Tags springen hinein, entfernte schrumpfen weg, ein abgelehnter schüttelt das Feld.

Installv1.0.0

aiw add @ai-website/tag-input

Bringt mit utils, kit, icon, input

Usage

<TagInput label="Skills" defaultValue={[…]} suggestions={[…]} max={8} />

Source

Ähnliche Components

Mehr aus Elements, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Picker und Auswahlfelder stehen.

In die Zwischenablage kopiert