BooleanSwitch

BooleanSwitch è un componente per alternare tra true, false o uno stato indeterminato. Offre una scelta binaria o un terzo stato opzionale, che spesso indica l’assenza di preferenza.

Utilizzo

Importa il BooleanSwitch da @firecms/ui e fornisci il value e, opzionalmente, un callback con onValueChange per gestire i cambiamenti di stato.

Interruttore predefinito

Esempio di un interruttore semplice che alterna tra 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}
        />
    );
}

Stato indeterminato

Esempio di un interruttore che alterna tra true, false e null (indeterminato).

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}
        />
    );
}

Varianti di dimensione

Il componente BooleanSwitch può avere diverse dimensioni, controllate dalla 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}
            />
        </>
    );
}

Stato disabilitato

Un BooleanSwitch disabilitato non consente l’interazione dell’utente e appare visivamente distinto.

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

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