Komponenten

Eingabefelder

Felder, Codes, Auswahlfelder und Schalter mit klaren Zuständen.

36 von 104

Das vollständige Suchverzeichnis wird geladen.

Check draw toggle

1932Check draw toggleEingabefelderEin quadratisches Kontrollkästchen, dessen Häkchen sich beim Aktivieren Strich für Strich selbst zeichnet, mit sanftem Drücken und Hover-Skala.

Checkbox motion lab

1933Checkbox motion labEingabefelderEin einzelnes übergroßes Kontrollkästchen, mit dem Sie genau einstellen können, wie fest es drückt und wie langsam das Häkchen eingezogen wird.

Checkmark draw checkbox

1934Checkmark draw checkboxEingabefelderEin quadratisches Kontrollkästchen, das auf eine Prüfung antwortet, indem es Strich für Strich ein Häkchen zeichnet und stattdessen einen kurzen Strich anzeigt, wenn sein Status nur teilweise festgelegt ist.

Directional theme wipe

1949Directional theme wipeEingabefelderEin Hell-Dunkel-Schalter, der das neue Thema mit einem gerichteten Wischen über den gesamten Rahmen sichtbar macht, statt eines sofortigen Farbwechsels.

Dot radio list

1951Dot radio listEingabefelderEine vertikale Liste von Radiooptionen mit kreisförmigen Indikatoren, wobei die Auswahl einer Option mit einem Punkt gefüllt und der Rest gelöscht wird.

Elastic toggle switch

1954Elastic toggle switchEingabefelderEin Pillenschalter, dessen runder Daumen sich beim Drücken zu einem Klecks zusammendrückt und mit einem sanften Sprung wieder in die runde Form zurückspringt, wobei er zwischen einem neutralen Aus-Zustand und einer festen Akzentfüllung wechselt.

Appointment Range Card

2108Appointment Range CardEingabefelderEine Karte, die ein Datumsraster für einen Monat mit einem Feld für Startzeit und Endzeit darunter kombiniert, um einen Tag und ein Zeitfenster in einem kompakten Block auszuwählen.

Appointment Scheduler Card

2109Appointment Scheduler CardEingabefelderEine einzelne Datumsauswahl, eingerahmt in einer betitelten Karte mit einer Schaltfläche „Zu heute springen“ in der Ecke, gestaltet für die Buchung eines Termins.

Booked Dates Picker

2114Booked Dates PickerEingabefelderEine einzelne Datumsauswahl, bei der eine Reihe bereits reservierter Tage durchgestrichen angezeigt wird und nicht ausgewählt werden kann, sodass die offenen Tage wie gewohnt ausgewählt werden können.

Bounded Stay Range Picker

2116Bounded Stay Range PickerEingabefelderEine Zwei-Monats-Bereichsauswahl, die sowohl eine Mindest- als auch eine Höchstanzahl an Nächten erzwingt, sodass nur Enddaten innerhalb dieses Fensters auswählbar bleiben, sobald ein Anfang festgelegt ist.

Caption Style Date Picker

2118Caption Style Date PickerEingabefelderEine einzelne Datumsauswahl gepaart mit einem Auswahlmenü, dessen Kopfzeile zwischen einem kombinierten Dropdown-Menü für Monat und Jahr, einem Dropdown-Menü nur für einen Monat oder einem Dropdown-Menü nur für ein Jahr wechselt.

Compact Time Range Picker

2126Compact Time Range PickerEingabefelderEine Monatskalenderkarte mit einem zweizelligen Zeitbereichsstreifen in der Fußzeile, wobei die beiden Zeitfelder nur durch einen kurzen Strich getrennt sind, sodass das Paar als eine Bereichssteuerung gelesen wird.

Date Range Picker

2139Date Range PickerEingabefelderEin Einzelmonatskalender zur Auswahl eines Start- und Enddatums, wobei jeder Tag dazwischen als ein fortlaufender hervorgehobener Streifen ausgefüllt wird, sobald beide Enden ausgewählt sind.

Dropdown Date Picker

2143Dropdown Date PickerEingabefelderEine Einzelmonats-Datumsauswahl, deren Kopfzeile ein Monats-Dropdown-Menü und ein Jahres-Dropdown-Menü nebeneinander verwendet. Das Springen zu einem entfernten Datum erfordert also eine Auswahl statt vieler Pfeilklicks.

Dual Month Date Picker

2144Dual Month Date PickerEingabefelderZwei benachbarte Monatsraster teilen sich ein ausgewähltes Datum, mit einem einzelnen Pfeilpaar, das beide Monate gemeinsam vor- oder zurückschaltet.

Addon Input Group

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.

Birthdate popover picker

2305Birthdate popover pickerEingabefelderEine beschriftete Schaltfläche, die einen schwebenden Kalender mit Dropdown-Listen für Monat und Jahr öffnet, um schnell zu einem Geburtsjahr zu gelangen, und sich selbst schließt, sobald ein Tag ausgewählt wird.

Clean Text Field

2321Clean Text FieldEingabefelderEine schnörkellose, umrandete Texteingabe für ein beschriftetes Formular: neutral im Ruhezustand, ein klarer Akzentring im Fokus, stummgeschaltet, wenn deaktiviert.

Date and Time Duo Picker

2332Date and Time Duo PickerEingabefelderZwei nebeneinander beschriftete Felder, eine kompakte Datumsschaltfläche, die ein Kalender-Popover öffnet, und ein einfaches Zeitfeld zum Festlegen eines Datums und einer Uhrzeit in zwei unabhängigen Schritten.

Day Agenda Calendar

2333Day Agenda CalendarEingabefelderEine Karte, die einen kompakten Monatskalender mit einer Liste geplanter Ereignisse für den ausgewählten Tag und einer Schaltfläche zum Hinzufügen eines weiteren Ereignisses kombiniert.

Drawn check checkbox

2343Drawn check checkboxEingabefelderEin Kontrollkästchen, dessen Häkchen sich Strich für Strich selbst zeichnet, während das Kästchen mit einer durchgehenden Akzentfarbe gefüllt wird.

Dropdown Date Time Picker

2345Dropdown Date Time PickerEingabefelderEin beschriftetes Datumsfeld, das einen Monatskalender in einem Dropdown-Menü öffnet, gepaart mit zwei einfachen Zeitfeldern darunter für eine Start- und Endzeit.

Editable date field

2346Editable date fieldEingabefelderEin Textfeld für ein Datum, das frei eingegeben werden kann und auch über ein kleines Kalender-Popover ausgefüllt werden kann, das über eine Schaltfläche mit einem nachgestellten Symbol geöffnet wird.

2757Avatar profile pickerEingabefelderEine Profil-Setup-Karte: eine Avatar-Bühne, deren Leuchtring sich je nach Auswahl ändert, ein Miniaturbildstreifen zum Wechseln des Avatars und ein validiertes Benutzernamenfeld.

Before/After reveal handle

2758Before/After reveal handleEingabefelderEine verschiebbare Trennlinie über zwei gestapelten Szenen, die eine auf der linken Seite und die andere auf der rechten Seite sichtbar macht und mit dem Zeiger, der Maus zum Springen und den Pfeiltasten verschoben werden kann.

Bounce drop toggle

2759Bounce drop toggleEingabefelderEin hoher vertikaler Kippschalter, dessen Kugel beim Ausschalten federnd zu Boden fällt und beim Einschalten mit einer festen Feder wieder nach oben gleitet.

Character budget counter

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.

Combobox field

2761Combobox fieldEingabefelderEin durchsuchbares Dropdown-Feld: Durch Eingabe wird eine Liste mit Optionen live gefiltert, und wenn Sie eine auswählen, wird das Feld ausgefüllt.

Command search palette

2762Command search paletteEingabefelderEin Suchfeld, das während der Eingabe eine gefilterte Liste von Befehlen unter sich ablegt, mit Pfeiltasten-Hervorhebung, Hover-Auswahl und einer Fußzeile mit Tastaturhinweisen.

Exposure dial slider

2766Exposure dial sliderEingabefelderEine Fotovorschau mit einer kreisförmigen Belichtungsanzeige in der Ecke über einem verschiebbaren Strichmaßstab, der den Belichtungswert in EV festlegt.

Filtered suggestion field

2768Filtered suggestion fieldEingabefelderEin Textfeld, das während der Eingabe eine Liste mit Vorschlägen filtert und die Übereinstimmungen unten in einem Dropdown-Menü mit Tastaturnavigation und einer Schaltfläche zum Löschen anzeigt.

Auto Grow Textarea

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

Curved input bar

2793Curved input barEingabefelderEin Pillentextfeld, das in einem sanften Aufwärtsbogen gebogen ist, wobei der eingegebene Text, die Einfügemarke und die Schaltfläche „Senden“ derselben Kurve folgen.

Date Range Picker

2794Date Range PickerEingabefelderEin Monatskalenderraster zur gemeinsamen Auswahl eines Start- und Enddatums, wobei die Tage dazwischen als eine zusammenhängende Zeitspanne angezeigt werden.

Elastic tug slider

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.

Autosize text field

2805Autosize text fieldEingabefelderEine mehrzeilige Texteingabe, die größer wird, wenn die Person tippt, bis zu einer großzügigen Grenze, mit einem Akzentfokusring und einem deaktivierten Status.

Gesamtes Verzeichnis öffnen

Schlagwörter

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (6)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (12)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (8)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (11)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)wrapper (3)zoom (4)