BooleanSwitch

BooleanSwitch es un componente para alternar entre true, false o un estado indeterminado. Ofrece una elección binaria o un tercer estado opcional, que a menudo indica la ausencia de preferencia.

Uso

Importa el componente BooleanSwitch de @firecms/ui y proporciona el value y, opcionalmente, un callback con onValueChange para manejar los cambios de estado.

Interruptor por defecto

Ejemplo de un interruptor simple que alterna entre true y 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}
        />
    );
}

Estado indeterminado

Ejemplo de un interruptor que alterna entre true, false y null (indeterminado).

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 tamaño

El componente BooleanSwitch puede tener diferentes tamaños, controlados por 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}
            />
        </>
    );
}

Estado deshabilitado

Un BooleanSwitch deshabilitado no permite la interacción del usuario y se muestra visualmente diferente.

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

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