Umschalter mit gleitender Pille
Eine farbige Pille gleitet hinter die angeklickte Option und passt ihre Breite jedes Mal an.
Einstellungen
Code
<div class="uv-rds"><span class="p"></span><button class="on">Monatlich</button><button>Jährlich</button><button>Lebenslang</button></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Wofür du ihn nutzen kannst
Das ist der Schalter, den man auf fast jeder Preisseite sieht: monatlich, jährlich oder einmalig zahlen. Er passt aber auch für „Lieferung / Abholung“ bei einem Restaurant oder für Karte und Liste in einer Immobiliensuche. Die Pille gleitet und passt sich jedem Label an. Ein Segmented Control in HTML und CSS mit etwas JavaScript.
Bleib bei zwei, drei oder höchstens vier kurzen Optionen. Bei mehr muss die Pille zu weit wandern und die Labels werden eng. Spart das Jahresabo Geld, schreib es direkt dazu, etwa „Jährlich −20 %“.