Formulare & Auswahl. Direkt einsetzbar.

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ein Plan, der zu dir passt. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-forms.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bf-block" data-bf-block="options" aria-labelledby="bf-options-title">
<header class="bf-header">
<p class="bf-eyebrow">Auswahl / Optionskarten</p>
<h3 id="bf-options-title">Ein Plan, der zu dir passt.</h3>
<p class="bf-intro">Native Tarifkarten und Segmentwahl mit nachvollziehbarer Jahreskalkulation.</p>
</header>
<form method="dialog">
<fieldset class="bf-fieldset">
<legend>Arbeitsweise wählen</legend>
<div class="bf-options">
<label class="bf-option">
<input type="radio" name="plan" value="solo" required checked>
<span class="bf-option-title">Solo</span>
<span class="bf-option-help">Ein klarer Platz für eigene Vorhaben.</span>
<span class="bf-option-price">12 € <small>/ Monat</small>
</span>
</label>
<label class="bf-option">
<input type="radio" name="plan" value="team" required>
<span class="bf-option-title">Team</span>
<span class="bf-option-help">Gemeinsame Abläufe für kleine Teams.</span>
<span class="bf-option-price">24 € <small>/ Monat</small>
</span>
</label>
<label class="bf-option">
<input type="radio" name="plan" value="studio" required>
<span class="bf-option-title">Studio</span>
<span class="bf-option-help">Mehr Raum für umfangreiche Projekte.</span>
<span class="bf-option-price">48 € <small>/ Monat</small>
</span>
</label>
</div>
</fieldset>
<fieldset class="bf-fieldset">
<legend>Abrechnungsbeispiel</legend>
<div class="bf-segments">
<label>
<input type="radio" name="period" value="month" checked> Monatlich</label>
<label>
<input type="radio" name="period" value="year"> Jährlich · 20 % weniger</label>
</div>
</fieldset>
<div class="bf-summary">
<span>Deine Auswahl</span>
<strong data-bf-total>12,00 €</strong>
<p data-bf-period-label>Gesamtpreis für einen Monat</p>
</div>
<div class="bf-actions">
<button class="r-button r-button-primary" type="submit">Auswahl lokal bestätigen</button>
<button class="r-button" type="reset">Zurücksetzen</button>
</div>
<p class="bf-help">Fiktive Tarife. Jahrespreis = Monatspreis × 12 × 0,8. Keine Registrierung, Buchung oder Zahlung.</p>
<p class="bf-error" data-bf-error role="alert" hidden>
</p>
<p class="bf-status" data-bf-status role="status">Lokales Funktionsbeispiel. Keine Datenübertragung.</p>
</form>
</section>
<script type="module">
import {initFormsBlocks} from 'https://ui.rittek.de/assets/modules/blocks-forms.js';
const formBlocks = initFormsBlocks(document);
// Vor dem Entfernen oder erneuten Einsetzen: formBlocks.destroy();
</script>
</body>
</html>

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ein Spielraum mit klaren Grenzen. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-forms.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bf-block" data-bf-block="quantity" aria-labelledby="bf-quantity-title">
<header class="bf-header">
<p class="bf-eyebrow">Eingabe / Menge & Range</p>
<h3 id="bf-quantity-title">Ein Spielraum mit klaren Grenzen.</h3>
<p class="bf-intro">Plätze und Speicher kombinieren. Direkte Eingabe und Schritttasten folgen denselben Regeln.</p>
</header>
<form method="dialog">
<div class="bf-two">
<fieldset class="bf-fieldset">
<legend>Anzahl Plätze</legend>
<label for="bf-quantity">1 bis 25 Plätze</label>
<div class="bf-stepper">
<button class="r-button" type="button" data-bf-step="-1" aria-label="Einen Platz weniger">−</button>
<input class="r-input" id="bf-quantity" name="quantity" type="number" min="1" max="25" step="1" value="3" required>
<button class="r-button" type="button" data-bf-step="1" aria-label="Einen Platz mehr">+</button>
</div>
</fieldset>
<fieldset class="bf-fieldset">
<legend>Speicher pro Workspace</legend>
<label for="bf-capacity">Kapazität: <output for="bf-capacity" data-bf-capacity>20 GB</output>
</label>
<input class="bf-range" id="bf-capacity" name="capacity" type="range" min="10" max="100" step="10" value="20">
<p class="bf-help">10 bis 100 GB, in Zehnerschritten.</p>
</fieldset>
</div>
<div class="bf-summary">
<span>Monatlicher Beispielpreis</span>
<strong data-bf-total>37,00 €</strong>
<p>9 € je Platz + 0,50 € je GB. Keine weiteren Zuschläge.</p>
</div>
<div class="bf-actions">
<button class="r-button r-button-primary" type="submit">Kalkulation prüfen</button>
<button class="r-button" type="reset">Zurücksetzen</button>
</div>
<p class="bf-help">Fiktives Rechenmodell. Grenzen gelten auch bei direkter Zahleneingabe; es entsteht kein Vertrag.</p>
<p class="bf-error" data-bf-error role="alert" hidden>
</p>
<p class="bf-status" data-bf-status role="status">Lokales Funktionsbeispiel. Keine Datenübertragung.</p>
</form>
</section>
<script type="module">
import {initFormsBlocks} from 'https://ui.rittek.de/assets/modules/blocks-forms.js';
const formBlocks = initFormsBlocks(document);
// Vor dem Entfernen oder erneuten Einsetzen: formBlocks.destroy();
</script>
</body>
</html>

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ein Kontakt. Oder ein kleines Team. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-forms.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bf-block" data-bf-block="repeat" aria-labelledby="bf-repeat-title">
<header class="bf-header">
<p class="bf-eyebrow">Formular / Wiederholbare Gruppen</p>
<h3 id="bf-repeat-title">Ein Kontakt. Oder ein kleines Team.</h3>
<p class="bf-intro">Zeilen ergänzen, gezielt entfernen und gemeinsam lokal prüfen.</p>
</header>
<form method="dialog">
<p class="bf-help">Eine bis fünf Kontaktzeilen. Namen und E-Mail-Adressen müssen pro Zeile ausgefüllt sein. Nutze ausschließlich fiktive Daten.</p>
<div class="bf-repeat" data-bf-rows>
</div>
<noscript>
<p>Für dynamische Kontaktzeilen ist das optionale Forms-Modul erforderlich.</p>
</noscript>
<div class="bf-repeat-footer">
<span data-bf-count>Maximal 5 Kontakte</span>
<button class="r-button" type="button" data-bf-add>Kontakt hinzufügen</button>
</div>
<div class="bf-actions">
<button class="r-button r-button-primary" type="submit">Kontakte lokal prüfen</button>
<button class="r-button" type="reset">Alle Zeilen leeren</button>
</div>
<p class="bf-help">Hinzufügen fokussiert den neuen Namen. Entfernen fokussiert die nächste oder vorherige Zeile. IDs bestehender Zeilen bleiben stabil. Es wird keine Einladung verschickt.</p>
<p class="bf-error" data-bf-error role="alert" hidden>
</p>
<p class="bf-status" data-bf-status role="status">Lokales Funktionsbeispiel. Keine Datenübertragung.</p>
</form>
</section>
<script type="module">
import {initFormsBlocks} from 'https://ui.rittek.de/assets/modules/blocks-forms.js';
const formBlocks = initFormsBlocks(document);
// Vor dem Entfernen oder erneuten Einsetzen: formBlocks.destroy();
</script>
</body>
</html>

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Nur die Angaben, die es braucht. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-forms.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bf-block" data-bf-block="dependent" aria-labelledby="bf-dependent-title">
<header class="bf-header">
<p class="bf-eyebrow">Formular / Abhängigkeiten</p>
<h3 id="bf-dependent-title">Nur die Angaben, die es braucht.</h3>
<p class="bf-intro">Kontaktart steuert erforderliche Felder. Änderungen bleiben sichtbar und sind verwerfbar.</p>
</header>
<form method="dialog">
<label class="bf-label" for="bf-contact-type">Kontaktart<select class="r-input" name="type" id="bf-contact-type">
<option value="private">Privat</option>
<option value="business">Organisation</option>
</select>
</label>
<div class="bf-two">
<label class="bf-label" for="bf-contact-person">Name<input class="r-input" id="bf-contact-person" name="name" value="Alex Beispiel" maxlength="80" required autocomplete="off">
</label>
<label class="bf-label" for="bf-contact-mail">Demo-E-Mail<input class="r-input" id="bf-contact-mail" name="email" type="email" value="alex@example.invalid" maxlength="160" required autocomplete="off">
</label>
</div>
<fieldset class="bf-company" data-bf-company hidden disabled>
<legend>Organisationsangaben</legend>
<label class="bf-label" for="bf-company">Organisation<input class="r-input" id="bf-company" name="company" maxlength="100" required autocomplete="off">
</label>
<p class="bf-help">Nur für Organisationskontakte erforderlich. Beim Privatkontakt ist dieses Feld deaktiviert und wird nicht übernommen.</p>
</fieldset>
<div class="bf-summary">
<span>Bearbeitungsstand</span>
<strong class="bf-dirty" data-bf-dirty>Keine ungespeicherten Änderungen</strong>
<p>Übernehmen speichert nur den Zustand dieser geöffneten Vorschau.</p>
</div>
<div class="bf-actions">
<button class="r-button r-button-primary" type="submit">Lokal übernehmen</button>
<button class="r-button" type="button" data-bf-revert disabled>Änderungen verwerfen</button>
<button class="r-button" type="reset">HTML-Startwerte</button>
</div>
<p class="bf-help">Verwerfen stellt den zuletzt übernommenen Stand wieder her. HTML-Startwerte setzt die ursprünglichen Felder zurück und kann dadurch erneut Änderungen erzeugen. Verborgene Firmenangaben bleiben beim Wechsel zunächst erhalten, zählen privat aber nicht zum gespeicherten Datensatz.</p>
<p class="bf-error" data-bf-error role="alert" hidden>
</p>
<p class="bf-status" data-bf-status role="status">Lokales Funktionsbeispiel. Keine Datenübertragung.</p>
</form>
</section>
<script type="module">
import {initFormsBlocks} from 'https://ui.rittek.de/assets/modules/blocks-forms.js';
const formBlocks = initFormsBlocks(document);
// Vor dem Entfernen oder erneuten Einsetzen: formBlocks.destroy();
</script>
</body>
</html>

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dein Eindruck zählt. · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-forms.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bf-block" data-bf-block="rating" aria-labelledby="bf-rating-title">
<header class="bf-header">
<p class="bf-eyebrow">Feedback / Bewertung</p>
<h3 id="bf-rating-title">Dein Eindruck zählt.</h3>
<p class="bf-intro">Eine eindeutig beschriftete Skala statt rein visueller Sterne.</p>
</header>
<form method="dialog">
<fieldset class="bf-fieldset">
<legend>Wie war dein Eindruck?</legend>
<div class="bf-rating">
<label>
<input type="radio" name="rating" value="1" required>
<span>1</span>
<small>Enttäuschend</small>
</label>
<label>
<input type="radio" name="rating" value="2" required>
<span>2</span>
<small>Ausbaufähig</small>
</label>
<label>
<input type="radio" name="rating" value="3" required>
<span>3</span>
<small>In Ordnung</small>
</label>
<label>
<input type="radio" name="rating" value="4" required>
<span>4</span>
<small>Gut</small>
</label>
<label>
<input type="radio" name="rating" value="5" required>
<span>5</span>
<small>Ausgezeichnet</small>
</label>
</div>
<p class="bf-help" data-bf-rating-label>Bitte eine Bewertung wählen.</p>
</fieldset>
<label class="bf-label" for="bf-review">Was möchtest du ergänzen? <span class="bf-help">Optional, maximal 500 Zeichen.</span>
<textarea class="r-input" id="bf-review" name="comment" rows="3" maxlength="500" placeholder="Fiktives Feedback für diese Vorschau">
</textarea>
</label>
<div class="bf-actions">
<button class="r-button r-button-primary" type="submit">Bewertung lokal erfassen</button>
<button class="r-button" type="reset">Zurücksetzen</button>
</div>
<p class="bf-help">Keine Veröffentlichung, keine Gesamtbewertung und keine dauerhafte Speicherung.</p>
<p class="bf-error" data-bf-error role="alert" hidden>
</p>
<p class="bf-status" data-bf-status role="status">Lokales Funktionsbeispiel. Keine Datenübertragung.</p>
</form>
</section>
<script type="module">
import {initFormsBlocks} from 'https://ui.rittek.de/assets/modules/blocks-forms.js';
const formBlocks = initFormsBlocks(document);
// Vor dem Entfernen oder erneuten Einsetzen: formBlocks.destroy();
</script>
</body>
</html>