Formulare

Komponenten · @repo/ui

Formulare

Eingabe-Komponenten — Input, Select, Combobox, MultiLangInput, LinkPicker, Checkbox, Radio, Slider. Alle mit Label, Hilfetext, Fehlerzustand und i18n-fähig.

InputStable

@repo/ui/input

Textfeld mit Label, Hilfetext, Fehleranzeige und Icon-Slots.

Vorschau
Konfiguration
React
import { Input } from "@repo/ui/input"

<Input
  type="text"
  label="Vorname"
  placeholder="Max"
/>
Weitere Beispiele
Praxis-Beispiel: Registrierungsformular
Wir senden Ihnen eine Bestätigung.
Mindestens 8 Zeichen, eine Zahl und ein Sonderzeichen.
Optional — wird in Ihrem Profil angezeigt.
Alle Zustände auf einen Blick
Zusätzliche Information für den Benutzer.
Dieses Feld ist erforderlich.

SelectStable

@repo/ui/select

Native <select>-Wrapper mit Label, Hilfetext, Fehlerzustand und Pflichtfeld-Markierung. Für kurze Listen (≤ 20 Optionen) — längere Listen → Combobox.

Wählen Sie das gewünschte Format.
Bitte wählen Sie ein Format.

ComboboxStable

@repo/ui/Combobox

Searchable Single-Select mit Tastaturnavigation. Drop-in für <Select> auf langen oder dynamischen Listen (Sprecher, Leitlinien, Kurse).

MultiLangInputStable

@repo/ui/MultiLangInput

Mehrsprachige Eingabe mit Tabs für DE/EN/FR. Single-Line oder Multiline (Textarea), optional mit Link-Insert-Popover. Schreibt einen { de, en, fr }-Wert.

Kurstitel*
26 / 120

LinkPickerStable

@repo/ui/LinkPicker

Autocomplete für interne URLs aus einer Suggestions-Liste. Gruppiert nach group, hebt Treffer hervor, akzeptiert auch freie Eingabe.

CheckboxStable

@repo/ui/checkbox

Checkbox mit Label und optionaler Beschreibung. Label akzeptiert ReactNode für inline-Links (z. B. AGB).

Vorschau
Konfiguration
React
import { Checkbox } from "@repo/ui/checkbox"

<Checkbox
  label="AGB akzeptieren"
  description="Ich stimme den Nutzungsbedingungen zu."
/>
Weitere Beispiele
Praxis-Beispiel: Einstellungen
Rich-Label (ReactNode)

Der label-Prop akzeptiert nicht nur Strings, sondern beliebige ReactNodes — z. B. für Booking-Flow-AGB pro Rechtsträger. Bei Inline-Links onClick={(e)=>e.stopPropagation()} setzen, damit der Klick nicht zusätzlich die Checkbox toggelt.

RadioStable

@repo/ui/radio

Radio-Button mit Label und optionaler Beschreibung. Auswahl genau einer Option aus einer Gruppe.

Vorschau
Konfiguration
React
import { Radio } from "@repo/ui/radio"

<Radio
  name="format"
  label="Live-Webinar"
  description="Teilnahme in Echtzeit"
  defaultChecked
/>
Weitere Beispiele
Praxis-Beispiel: Kursformat wählen

SliderStable

@repo/ui/slider

Schieberegler mit Wertanzeige.

Vorschau
CME-Jahresziel60
Konfiguration
React
import { Slider } from "@repo/ui/slider"

<Slider
  label="CME-Jahresziel"
  defaultValue={60}
  max={250}
/>

OtpCodeInputBeta

@repo/ui/OtpCodeInput

Einmal-Code-Eingabe für TOTP-2FA: sechs Anzeige-Boxen, getrieben von EINEM echten (unsichtbaren) Input — Paste, iOS-Code-Autofill und Screenreader laufen über das eine Feld, die Boxen sind reine Darstellung.

Vorschau
Konfiguration
React
import { OtpCodeInput } from "@repo/ui/OtpCodeInput"

<OtpCodeInput
  value={code}
  onChange={setCode}
  onComplete={(code) => submit(code)}
  label="Code aus der App"
/>

TotpQrPanelBeta

@repo/ui/TotpQrPanel

QR-Anzeige für das TOTP-Enrollment + ausblendbarer Schlüssel für manuelle Eingabe. Das SVG kommt als String von der Enrollment-API und wird als Data-URI gerendert — kein innerHTML, keine QR-Library.

QR-Code für Ihre Authenticator-App
QR-Code lässt sich nicht scannen?

RecoveryCodesPanelBeta

@repo/ui/RecoveryCodesPanel

Einmalige Anzeige frisch generierter Recovery-Codes: Monospace-Grid + Alle-kopieren + Download als Textdatei. Bestätigungs-Slot (children) für den Code-Test des Aufrufers.

  • ABCDE-23456
  • FGHIJ-34567
  • KLMNO-45678
  • PQRST-56789
  • UVWXY-67234
  • Z2345-72345