BooleanSwitch

BooleanSwitch é um componente para alternar entre true, false ou um estado indeterminado. Oferece uma escolha binária ou um terceiro estado opcional, frequentemente indicando a ausência de preferência.

Uso

Importe o BooleanSwitch de @firecms/ui e forneça o value e, opcionalmente, um callback com onValueChange para lidar com as mudanças de estado.

Interruptor padrão

Exemplo de um interruptor simples que alterna entre true e 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

Exemplo de um interruptor que alterna entre true, false e 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 tamanho

O componente BooleanSwitch pode ter diferentes tamanhos, controlados pela 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 desabilitado

Um BooleanSwitch desabilitado não permite a interação do usuário e aparece visualmente distinto.

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

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