Casilla de verificación (Checkbox)

Las casillas de verificación (Checkboxes) se utilizan para la selección entre múltiples opciones. Se pueden alternar entre marcado (checked), desmarcado (unchecked) y un estado intermedio.

Uso

Para usar Checkbox, impórtalo desde tus componentes y pasa la prop checked (marcado), la prop onCheckedChange (al cambiar el estado de marcado) y opcionalmente, las props disabled (deshabilitado), size (tamaño) y color.

Casilla de verificación básica

Una casilla de verificación simple con configuración mínima.

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

Casilla de verificación con estado indeterminado

Una casilla de verificación que muestra el estado intermedio (indeterminado), que normalmente se usa en escenarios de “seleccionar todo” en los que no se han realizado todas las subselecciones.

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

Tamaños de casilla de verificación

Ilustrando cómo utilizar diferentes tamaños para el componente de casilla de verificación.

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

Colores de casilla de verificación

Demuestra el uso de la prop color para personalizar la apariencia de la casilla de verificación.

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