Der Standard-Klick-Button für Aktionen wie Speichern, Absenden oder Navigieren. Nimm outline/ghost für weniger wichtige Aktionen neben einem primären Button.

Input für einzeilige Eingaben (E-Mail, Name, Suche), Textarea für mehrzeilige (Nachrichten, Kommentare). Field bündelt Label, Hinweistext und Fehlermeldung drumherum, damit jedes Feld barrierefrei mit seinem Label verknüpft ist.

Ein Dropdown zum Auswählen einer Option aus einer kurzen, festen Liste (z.B. Sprache, Land) – für lange, durchsuchbare Listen nimm stattdessen Combobox.

Checkbox für unabhängige Ja/Nein-Optionen (mehrere gleichzeitig ankreuzbar), Radio Group wenn genau eine Option aus mehreren gewählt werden muss, Switch für einen sofort wirksamen Ein/Aus-Zustand (z.B. eine Einstellung, kein Formularfeld).

Ein Button, der gedrückt bleibt, bis man ihn erneut klickt – z.B. „Fett“ in einer Formatierungsleiste. Toggle Group gruppiert mehrere davon, etwa für eine Textausrichtung, bei der immer nur eine Option aktiv ist.

Zum Auswählen eines Zahlenwerts (oder eines Bereichs mit zwei Griffen, z.B. Preisspanne) durch Ziehen statt Eintippen – anschaulicher als ein reines Zahlenfeld bei begrenztem Wertebereich.

Ein normales Passwortfeld, aber mit einem Augen-Icon zum kurzzeitigen Sichtbarmachen der Eingabe – hilft Tippfehler zu vermeiden, bevor man ein Formular abschickt.

Die klassische Sterne-Bewertung – interaktiv zum Abgeben einer Bewertung, oder read-only zum reinen Anzeigen einer bestehenden Bewertung (z.B. Produktbewertungen).

Nimmt dir die Formular-Verwaltung ab (Werte, Absenden, Zurücksetzen), ohne eine externe Bibliothek wie react-hook-form zu benötigen – register() an ein Feld hängen und fertig. Für Formulare mit Validierung direkt aus einem Zod-Schema nimm stattdessen Schema Form.

Du beschreibst nur die Datenstruktur als Zod-Schema (welche Felder, welcher Typ, welche Regeln) – das komplette Formular inklusive Validierung und Fehlermeldungen wird daraus automatisch erzeugt, ohne dass du jedes Feld einzeln aufbauen musst.

Eine Zone zum Reinziehen von Dateien per Drag & Drop oder klassischem Datei-Dialog, mit Liste der ausgewählten Dateien. Kümmert sich nur um die Auswahl im Browser – das eigentliche Hochladen zu deinem Server schreibst du selbst.

Ein einfacher Editor für formatierten Text (fett, kursiv, Listen, Links) direkt im Browser – ohne eine schwere Editor-Bibliothek wie TipTap oder Slate einzubinden, wenn du nur Grundformatierung brauchst.

Wie Select, aber mit Suchfeld – sinnvoll, sobald eine Liste zu lang zum Scrollen wird (z.B. Länder, Frameworks) und Nutzer stattdessen tippen wollen, um die passende Option zu finden.

Calendar zeigt einen Monat zum direkten Anklicken eines Datums, Date Picker ist die kompakte Variante als Textfeld, das den Kalender erst bei Klick als Popover öffnet – platzsparender in normalen Formularen.