Terminzeit-Auswahl
Ein Raster mit Uhrzeiten zum Buchen, belegte Termine sind grau und durchgestrichen.
Einstellungen
Code
<fieldset class="uv-rts"><legend>Dienstag, 14. Oktober</legend><div class="gr"><label><input type="radio" name="uv-rts"><span>09:00</span></label><label><input type="radio" name="uv-rts" disabled><span>09:30</span></label><label><input type="radio" name="uv-rts"><span>10:00</span></label><label><input type="radio" name="uv-rts" checked><span>10:30</span></label><label><input type="radio" name="uv-rts"><span>11:00</span></label><label><input type="radio" name="uv-rts"><span>11:30</span></label><label><input type="radio" name="uv-rts" disabled><span>12:00</span></label><label><input type="radio" name="uv-rts"><span>16:00</span></label><label><input type="radio" name="uv-rts"><span>16:30</span></label></div></fieldset>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
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Praxen, Friseure, Fitnessstudios und Berater brauchen alle eine Zeitauswahl, und ein Raster ist schneller als jedes Dropdown. Freie Zeiten haben eine Kontur, belegte sind deaktivierte Radios in Grau und durchgestrichen, und die gewählte Zeit füllt sich mit Farbe und einem kleinen Haken, damit die Auswahl sogar in Graustufen klar ist.
Die Überschrift lässt sich für das Datum anpassen. Jeder Termin ist ein natives Radio, wo nötig mit disabled, der Browser überspringt belegte Zeiten also per Tastatur, und der Wert wird wie jedes Feld gesendet.