CheckboxField

CheckboxField renderiza un toggle booleano mostrado como un checkbox grande basado en ícono. Hacer clic en cualquier parte del área del cuerpo (o presionar Enter/Espacio) alterna el valor. Se pueden proveer rutas de ícono personalizadas para los estados marcado y desmarcado.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | boolean | Sí | — | Estado de marcado actual. | | onChange | (checked: boolean) => void | Sí | — | Llamado con el nuevo valor booleano al alternar. | | label | string | No | — | Etiqueta de texto mostrada junto al ícono del checkbox. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | iconSize | number | No | 34 | Tamaño en píxeles del ícono del checkbox. | | iconColor | string | No | 'primary' | Color aplicado al ícono. Acepta un nombre de color del tema o cualquier color CSS. | | checkedIconPaths | { d: string; color?: string }[] | No | — | Rutas SVG personalizadas para el estado marcado. | | uncheckedIconPaths | { d: string; color?: string }[] | No | — | Rutas SVG personalizadas para el estado desmarcado. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor raíz. | | headerStyle | React.CSSProperties | No | — | Estilos del área de encabezado. | | bodyStyle | React.CSSProperties | No | — | Estilos del área del cuerpo clickeable. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor raíz. | | id | string | No | — | Atributo id del contenedor raíz. |

Uso

Básico

import React, { useState } from 'react';
import CheckboxField from '@/components/fields/CheckboxField';

export default function Example() {
  const [accepted, setAccepted] = useState(false);

  return (
    <CheckboxField
      label="Acepto los términos y condiciones"
      value={accepted}
      onChange={setAccepted}
    />
  );
}

Con descripción y tamaño de ícono personalizado

<CheckboxField
  label="Activar notificaciones"
  description="Recibirás alertas por email cuando ocurran nuevos eventos."
  value={notifications}
  onChange={setNotifications}
  iconSize={42}
  iconColor="success"
/>