BooleanSwitch

BooleanSwitch est un composant pour basculer entre true, false ou un état indéterminé. Il offre un choix binaire ou un troisième état optionnel, signifiant souvent l’absence de préférence.

Utilisation

Importez le BooleanSwitch depuis @firecms/ui et fournissez la value, et optionnellement, un callback avec onValueChange pour gérer les changements d’état.

Interrupteur par défaut

Exemple d’un interrupteur simple qui bascule entre true et false.

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

export default function BooleanSwitchDefaultDemo() {
    const [value, setValue] = useState(true);
    return (
        <BooleanSwitch
            value={value}
            onValueChange={setValue}
        />
    );
}

État indéterminé

Exemple d’un interrupteur qui bascule entre true, false et null (indéterminé).

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

export default function BooleanSwitchIndeterminateDemo() {
    const [value, setValue] = useState<boolean | null>(null);
    return (
        <BooleanSwitch
            value={value}
            allowIndeterminate={true}
            onValueChange={setValue}
        />
    );
}

Variantes de taille

Le composant BooleanSwitch peut avoir différentes tailles, contrôlées par la prop size.

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

export default function BooleanSwitchSizeDemo() {
    const [value, setValue] = useState<boolean | null>(true);

    return (
        <>
            <BooleanSwitch
                value={value}
                size="small"
                onValueChange={setValue}
            />
            <BooleanSwitch
                value={value}
                size="medium"
                onValueChange={setValue}
            />
        </>
    );
}

État désactivé

Un BooleanSwitch désactivé ne permet pas d’interaction utilisateur et apparaît visuellement distinct.

import React from "react";
import { BooleanSwitch } from "@firecms/ui";

export default function BooleanSwitchDisabledDemo() {
    return (
        <BooleanSwitch
            value={true}
            disabled={true}
        />
    );
}