Auswahl

Gemeinsame Zustandsfamilie: Hover neutral, Tastaturfokus blau, Fehler rot vor Gewählt, Disabled ohne Hover.

Checkbox

shadcn/ui · checkbox

Import

import { Checkbox } from "@/components/ui/checkbox"

Verwendung

Für unabhängige Mehrfachauswahl.
Label immer klickbar (htmlFor).

Radio Group

shadcn/ui · radio-group

Import

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

Verwendung

Für eine Auswahl aus 2–5 Optionen.
Pfeiltasten wechseln innerhalb der Gruppe.

Switch

shadcn/ui · switch

Zustände

Aus

Deaktiviert

FehlerZustimmung erforderlich

Import

import { Switch } from "@/components/ui/switch"

Verwendung

Sofort wirksame Ein/Aus-Einstellung.
In Formularen mit Speichern-Schritt lieber Checkbox.

Slider

shadcn/ui · slider

Import

import { Slider } from "@/components/ui/slider"

Verwendung

Für Bereiche/Filter, Wert immer als Text anzeigen.
Pfeiltasten ändern in Schritten.

Select

shadcn/ui · select

Import

import { Select, SelectTrigger, SelectContent, SelectItem } from "@/components/ui/select"

Verwendung

Bis ca. 15 Optionen ohne Suche.
Mehr Optionen → Combobox.

Native Select

shadcn/ui · native-select

Zustände

Import

import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

Verwendung

Für einfache Listen und Mobile (System-Picker).
Gleiches Erscheinungsbild wie Select.

Combobox mit Suche

Komposition

Offizielles Radix-Rezept. Die Registry-Combobox nutzt @base-ui/react (andere Komponentenfamilie) und ist bewusst nicht installiert.

Import

import { Combobox } from "@/components/compositions/combobox"

Basis: popover, command (cmdk), badge

Verwendung

Einzelauswahl schließt nach Wahl, Mehrfachauswahl bleibt offen.
Chips haben eigene Entfernen-Buttons neben dem Trigger (keine verschachtelte Interaktion).
× rechts setzt die gesamte Auswahl zurück; im Menü zusätzlich „Zurücksetzen“.
Gruppen nach Objekt; leere Suche zeigt einen Hinweis.
Escape schließt, Fokus kehrt zum Auslöser zurück.