Switch
Eine Pill-Spur und ein runder Griff, der in 180ms wandert.
<Switch label="Send budget alerts" description="Email owners at 80% and 100% of the monthly budget." defaultChecked className="w-400" />import { Switch } from "@logicplanes/kaeso-ui";Props
aria-labelstringDer zugängliche Name, wenn es keine sichtbare Beschriftung gibt.
aria-labelledbystringDie ID des Elements, das es benennt, wenn seine Beschriftung an anderer Stelle der Seite steht.
checkedbooleanOb es angehakt ist, bei gesteuertem Zustand.
defaultCheckedbooleanOb es anfangs angehakt ist, wenn die Komponente ihren Zustand selbst verwaltet.
descriptionReactNodeEin Satz Hilfe unter der Beschriftung.
disabledbooleanSchaltet es aus: Es lässt sich nicht verwenden und wirkt abgeblendet.
disabledReasonstringWarum es deaktiviert ist, als Tooltip gezeigt; es bleibt fokussierbar, damit man den Grund lesen kann.
idstringDie ID des Steuerelements, damit eine Beschriftung an anderer Stelle darauf verweisen kann.
labelReactNodeDie Beschriftung des Schalters.
loadingbooleanZeigt, dass die Änderung gespeichert wird, und ignoriert Klicks, bis sie gespeichert ist.
namestringDer Feldname, unter dem der Wert mit einem Formular gesendet wird.
onCheckedChange((checked: boolean) => void)Wird mit dem neuen Zustand aufgerufen, wenn es an- oder abgehakt wird.
readOnlybooleanZeigt den Wert, ohne dass er sich ändern lässt.
size"md" | "sm" | "lg" = mdDie Größe des Schalters.