Composants

interrupteur

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

16 sur 16

1610Toggle iconIcônesUne piste de pilules avec un bouton solide posé à une extrémité, poussant le long de la piste comme pour tester le passage.

1657Theme toggle buttonBoutonsUn interrupteur étiqueté qui bascule entre la lumière et l'obscurité, faisant tourner son soleil, marque un tour complet en survol et fait fondre le mot à côté de lui sur chaque interrupteur.

1954Elastic toggle switchChamps de saisieUne pilule à bascule dont le pouce rond s'écrase en une goutte lorsqu'il est pressé et revient pour s'arrondir avec un léger rebond, glissant entre un état neutre et un remplissage d'accent solide.

1980Icon crossfade switchChamps de saisieUn interrupteur à bascule dont l'icône en forme de pouce s'estompe et se transforme en une icône différente lorsque l'interrupteur bascule entre éteint et allumé.

2017Settings Toggle RowChamps de saisieUne rangée de paramètres étiquetée se terminant par un interrupteur marche/arrêt dont le pouce s'étire sous une pression et revient en arrière lorsqu'il se stabilise.

2058Sun Moon SwitchChamps de saisieUn interrupteur à pilule dont le pouce glisse entre deux positions de repos tandis qu'une icône de soleil et une icône de lune flanquant la piste apparaissent et disparaissent pour correspondre.

2062Switch Spring LabChamps de saisieUn interrupteur marche/arrêt nu pour régler la sensation de rebond du ressort du pouce et la largeur du pouce s'étire sous une presse.

2067Thumb icon switchChamps de saisieUn interrupteur à pilule dont le pouce coulissant porte sa propre petite icône, qui change lorsque le pouce atteint chaque extrémité de la piste.

2081View mode toggle switchNavigationUn commutateur à deux états qui fait basculer une vue entre deux modes nommés, avec un pouce coulissant qui se rétrécit sous une pression et échange une petite icône à l'intérieur.

2433Sliding Thumb SwitchChamps de saisieUn interrupteur marche/arrêt construit à partir d'une case à cocher cachée : une piste de pilule qui se recolore et un pouce rond qui glisse vers le bord opposé.

2759Bounce drop toggleChamps de saisieUn grand interrupteur à bascule vertical dont la boule tombe vers le bas avec un mouvement rebondissant lorsqu'elle est éteinte et remonte avec un ressort serré lorsqu'elle est allumée.

2771Layout toggle switchChamps de saisieUn commutateur dont le bouton traverse la piste en animant un changement de disposition réel plutôt qu'une translation, de sorte que le lancer reste exact quelle que soit la largeur de la piste.

2781Spring layout toggleChamps de saisieUn interrupteur dont le bouton est aligné sur une extrémité de la piste uniquement par disposition et oscille entre les deux positions mesurées chaque fois que l'état bascule.

2798Labeled toggle rowChamps de saisieUn petit interrupteur marche/arrêt associé à sa propre étiquette de texte, dimensionnée pour une ligne de liste de paramètres.

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.

2808Latching square toggleChamps de saisieUn bouton d'icône carré compact qui se verrouille entre un état désactivé légèrement délimité et un état enfoncé plein d'accents.

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.

Bounce drop toggle
Un grand interrupteur à bascule vertical dont la boule tombe vers le bas avec un mouvement rebondissant lorsqu'elle est éteinte et remonte avec un ressort serré lorsqu'elle est allumée.
Elastic toggle switch
Une pilule à bascule dont le pouce rond s'écrase en une goutte lorsqu'il est pressé et revient pour s'arrondir avec un léger rebond, glissant entre un état neutre et un remplissage d'accent solide.
Icon crossfade switch
Un interrupteur à bascule dont l'icône en forme de pouce s'estompe et se transforme en une icône différente lorsque l'interrupteur bascule entre éteint et allumé.

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)