Composants

form

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 47

Chargement de l’index de recherche complet.

Floating label input

1529Floating label inputChamps de saisieUn champ de texte dont l'étiquette reste à l'intérieur de la boîte et s'élève jusqu'au bord supérieur lors du focus ou une fois que le champ a une valeur, avec des apparences ciblées, valides et invalides.

Anchored detail popover

1910Anchored detail popoverSuperpositionsUn bouton de déclenchement qui ouvre un petit panneau ancré contenant un formulaire de paramètres intitulé, sortant du bord du déclencheur et se fermant sur Échap ou sur un clic extérieur.

Branded Code Panel

1925Branded Code PanelFormulairesUn panneau de vérification centré sous un petit verrou de marque, où un code rejeté secoue la ligne une fois, l'efface et les mains se concentrent sur la première case.

Card blur tabs

1928Card blur tabsNavigationOnglets encadrés dans une carte bordée dont le contenu est brièvement flou et fondu lorsque vous changez de panneau, avec une pilule coulissante derrière l'étiquette de l'onglet actif.

1957Field with status iconFormulairesUne entrée étiquetée dont le bord arrière affiche une petite icône de vérification ou d'avertissement qui disparaît au moment où la validité du champ change, sans modifier la présentation.

Focus Guard Form

1964Focus Guard FormFormulairesUn formulaire qui, en cas d'échec de la soumission, annule la soumission, déplace le focus du clavier directement sur le premier champ invalide et annonce le problème aux utilisateurs de lecteurs d'écran.

Select All Checklist

1982Select All ChecklistChamps de saisieUne case à cocher parent qui affiche un tiret lorsque seuls certains de ses éléments enfants sont cochés, et une coche une fois que chaque élément l'est.

One Question Wizard

2006One Question WizardFormulairesUn formulaire en plusieurs étapes qui affiche une seule question à la fois avec une lecture de la progression, n'avançant que lorsque la question actuelle a une réponse valide.

Paired Code Split View

2010Paired Code Split ViewFormulairesUne étape de vérification en écran partagé dont les cases de code sont regroupées par paires avec des tirets entre elles, se soumettant au moment où la dernière case se remplit.

Centered modal frame

2119Centered modal frameSuperpositionsUn modal centré uni qui s'estompe et s'agrandit sur un fond grisé, avec un en-tête, un corps et un pied de page, pour les formulaires et les confirmations de tous les jours.

Edge-slide panel

2146Edge-slide panelSuperpositionsUn panneau de paramètres qui s'appuie contre le bord de l'écran tandis que la page située derrière s'assombrit et se brouille.

Addon Input Group

2297Addon Input GroupChamps de saisieUn champ de texte enveloppé dans une coque bordée qui peut porter une icône de début, un bouton ou un texte de fin, et partage un anneau de mise au point dans l'ensemble du groupe.

Clean Text Field

2321Clean Text FieldChamps de saisieUne saisie de texte encadrée sans fioritures pour un formulaire étiqueté : neutre au repos, un anneau d'accentuation net lors de la mise au point, coupé lorsqu'il est désactivé.

Drawn check checkbox

2343Drawn check checkboxChamps de saisieUne case à cocher dont la coche se dessine trait par trait à mesure que la case se remplit d'une couleur d'accent unie.

Editable date field

2346Editable date fieldChamps de saisieUn champ de texte pour une date qui accepte la saisie libre et peut également être rempli à partir d'un petit popover de calendrier ouvert par un bouton d'icône de fin.

Focus ring text input

2356Focus ring text inputChamps de saisieUn champ de texte d'une seule ligne avec un espace réservé en sourdine et un anneau d'accent plein qui apparaît uniquement lors de la mise au point.

Passcode slot input

2393Passcode slot inputChamps de saisieUn champ one-time-passcode d'emplacements fusionnés à bordure partagée sur une entrée masquée, avec un curseur clignotant dans l'emplacement vide actif.

Account signup

2731Account signupPagesUne page d'inscription centrée avec un champ de courrier électronique, un bouton principal de création de compte, un séparateur et deux boutons secondaires de poursuite pour les autres fournisseurs d'identité.

Centered signup card

2733Centered signup cardPagesUne carte de page centrée qui collecte un nom complet, une adresse e-mail, un mot de passe et une confirmation, chaque champ avec une courte ligne d'assistance, ainsi qu'un bouton d'inscription au compte connecté.

Detailed signup card

2734Detailed signup cardPagesUne carte d'inscription centrée rassemblant le nom complet, l'e-mail, le mot de passe et la confirmation, chacun avec une ligne d'assistance, avant un bouton principal de création de compte.

Image panel login card

2736Image panel login cardPagesUne large carte de connexion divisée en un panneau de formulaire et un panneau d'image décoratif, avec une rangée de trois boutons de connexion alternatifs contenant uniquement des icônes et un texte de termes en dessous.

Image panel signup card

2737Image panel signup cardPagesUne large carte d'inscription divisée en un panneau de formulaire et un panneau d'image décoratif, avec des champs de mot de passe appariés et trois boutons de fournisseur contenant uniquement des icônes sous un séparateur.

Minimal email login

2739Minimal email loginPagesUne page de connexion sans mot de passe avec une petite marque, un en-tête de bienvenue, un champ de courrier électronique obligatoire, un seul bouton de soumission et deux options de connexion alternatives sous un séparateur.

Minimal email sign in

2740Minimal email sign inPagesUne page de connexion sans mot de passe avec une marque, un en-tête de bienvenue, un champ de courrier électronique, un bouton principal et deux options de connexion alternatives sous un séparateur.

Muted social login

2742Muted social loginPagesUne page de connexion complète sur un fond légèrement teinté avec une marque, deux boutons de connexion sociale, un séparateur et un formulaire d'e-mail et de mot de passe sur une seule carte.

Muted compact signup

2743Muted compact signupPagesUne page d'inscription avec une carte centrée sur un arrière-plan teinté sourd où les deux champs de mot de passe partagent une ligne compacte à deux colonnes sous une seule ligne d'assistance.

Signup card on tint

2748Signup card on tintPagesUne carte d'inscription centrée sur un fond de page teinté, associant les champs de mot de passe et de confirmation de mot de passe côte à côte sous une ligne d'assistance partagée.

Signup card with photo

2749Signup card with photoPagesUne large carte d'inscription divisée en une moitié de formulaire et une moitié de photo découpée, collectant les e-mails et les mots de passe appariés avant une rangée de boutons de fournisseur composés uniquement d'icônes.

Signup page with social

2750Signup page with socialPagesUne page d'inscription sans carte collectant le nom, l'adresse e-mail et les mots de passe correspondants au-dessus d'un bouton de fournisseur alternatif décrit et d'un lien de connexion centré.

Simple centered login

2751Simple centered loginPagesUne carte de page de connexion centrée avec des champs d'e-mail et de mot de passe, un bouton d'envoi pleine largeur, un bouton d'authentification unique en option et un lien pour créer un compte.

Simple sign-in card

2752Simple sign-in cardPagesUne carte de page de connexion centrée avec un champ de courrier électronique étiqueté, un champ de mot de passe avec un lien de mot de passe oublié, un bouton de soumission principal et un bouton de fournisseur alternatif décrit.

Orbit drop zone

2774Orbit drop zoneChamps de saisieValidez un fichier, simulez la progression et conservez un résultat de pièce jointe supprimable.

Single value slider

2791Single value sliderChamps de saisieUn curseur horizontal avec un pouce déplaçable qui remplit la piste derrière lui afin que la valeur actuelle soit lisible d'un coup d'œil.

Auto Grow Textarea

2792Auto Grow TextareaChamps de saisieUn champ de texte multiligne qui s'agrandit à mesure que la personne tape davantage, au lieu de défiler à l'intérieur d'une zone fixe.

Compact select menu

2801Compact select menuChamps de saisieUn bouton de déclenchement qui ouvre une liste flottante de choix, avec le choix actuel affiché sur le bouton et une coche à côté dans la liste.

Settings toggle switch

2802Settings toggle switchChamps de saisieUn petit interrupteur marche/arrêt en forme de pilule avec un bouton coulissant qui active un seul réglage, sa piste passant d'un accent sourd à un accent solide tandis que le bouton s'étire comme un élastique s'il est enfoncé à mi-glissière.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Account signup
Une page d'inscription centrée avec un champ de courrier électronique, un bouton principal de création de compte, un séparateur et deux boutons secondaires de poursuite pour les autres fournisseurs d'identité.
Addon Input Group
Un champ de texte enveloppé dans une coque bordée qui peut porter une icône de début, un bouton ou un texte de fin, et partage un anneau de mise au point dans l'ensemble du groupe.
Anchored detail popover
Un bouton de déclenchement qui ouvre un petit panneau ancré contenant un formulaire de paramètres intitulé, sortant du bord du déclencheur et se fermant sur Échap ou sur un clic extérieur.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)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)billing (10)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 (7)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 (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)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)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)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 (13)finance (10)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 (50)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)log (3)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)product (6)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 (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)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 (21)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)workflow (18)workspace (36)wrapper (3)zoom (4)