Kontrollkästchen

Kontrollkästchen (Checkboxes) werden für die Auswahl aus mehreren Optionen verwendet. Sie können zwischen aktiviert, deaktiviert und einem Zwischenzustand umgeschaltet werden.

Verwendung

Um die Checkbox zu verwenden, importieren Sie sie aus Ihren Komponenten und übergeben Sie die Eigenschaften checked, onCheckedChange und optional disabled, size und color.

Einfaches Kontrollkästchen

Ein einfaches Kontrollkästchen mit minimaler Konfiguration.

import React, { useState } from "react";
import { Checkbox } from "@firecms/ui";

export default function CheckboxBasicDemo() {
    const [checked, setChecked] = useState(true);

    return (
        <Checkbox
            checked={checked}
            onCheckedChange={(newChecked) => setChecked(newChecked)}
        />
    );
}

Kontrollkästchen mit unbestimmtem Zustand

Ein Kontrollkästchen, das den unbestimmten Zustand (indeterminate) demonstriert, der typischerweise für “Alles auswählen”-Szenarien verwendet wird, bei denen nicht alle Unterauswahlen getroffen wurden.

import React, { useState } from "react";
import { Checkbox } from "@firecms/ui";

export default function CheckboxIndeterminateDemo() {
    const [indeterminate, setIndeterminate] = useState(true);
    const [checked, setChecked] = useState(false);

    return (
        <Checkbox
            checked={checked}
            indeterminate={indeterminate}
            onCheckedChange={(newChecked) => {
                if (indeterminate) {
                    setIndeterminate(false);
                    setChecked(true);
                } else if (checked) {
                    setChecked(false);
                } else {
                    setIndeterminate(true);
                }
            }}
        />
    );
}

Größen von Kontrollkästchen

Veranschaulicht die Verwendung verschiedener Größen für die Checkbox-Komponente.

import React, { useState } from "react";
import { Checkbox } from "@firecms/ui";

export default function CheckboxSizeDemo() {
    const [checked, setChecked] = useState(true);

    return (
        <div className="flex flex-col items-center gap-4">
            <Checkbox
                size="small"
                checked={checked}
                onCheckedChange={setChecked}
                color="primary"/>
            <Checkbox
                size="medium"
                checked={checked}
                onCheckedChange={setChecked}
                color="primary"/>
            <Checkbox
                size="large"
                checked={checked}
                onCheckedChange={setChecked}
                color="primary"/>
        </div>
    );
}

Farben von Kontrollkästchen

Demonstriert die Verwendung der Eigenschaft color zur Anpassung des Aussehens der Checkbox.

import React, { useState } from "react";
import { Checkbox } from "@firecms/ui";

export default function CheckboxColorDemo() {
    const [checkedPrimary, setCheckedPrimary] = useState(true);
    const [checkedSecondary, setCheckedSecondary] = useState(true);

    return (
        <div className="flex flex-col items-center gap-4">
            <Checkbox
                size="medium"
                checked={checkedPrimary}
                onCheckedChange={setCheckedPrimary}
                color="primary"
            />
            <Checkbox
                size="medium"
                checked={checkedSecondary}
                onCheckedChange={setCheckedSecondary}
                color="secondary"
            />
        </div>
    );
}