CheckboxGroupField

CheckboxGroupField renderiza una lista de opciones de checkbox que permiten al usuario seleccionar uno o más valores. Una función de renderizado personalizada puede reemplazar el layout predeterminado de checkbox + etiqueta con cualquier nodo React.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | options | CheckboxOption[] | Sí | — | Array de opciones a mostrar (ver forma CheckboxOption más abajo). | | selectedValues | (string \| number \| boolean)[] | Sí | — | Array de valores seleccionados actualmente. | | onChange | (values: (string \| number \| boolean)[]) => void | Sí | — | Llamado con el array de valores seleccionados actualizado al marcar/desmarcar cualquier opción. | | label | string | No | — | Etiqueta mostrada sobre el grupo. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | renderOption | (option: CheckboxOption, index: number, isChecked: boolean) => React.ReactNode | No | — | Función de renderizado personalizada por opción. Cuando se provee, reemplaza el layout predeterminado de checkbox. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor raíz. | | labelStyle | React.CSSProperties | No | — | Estilos de la etiqueta del grupo. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | optionContainerStyle | React.CSSProperties | No | — | Estilos del contenedor de cada fila de opción (solo layout predeterminado). | | optionLabelStyle | React.CSSProperties | No | — | Estilos del span de etiqueta de cada opción (solo layout predeterminado). | | className | string | No | — | Clase CSS del contenedor raíz. | | id | string | No | — | Atributo id del contenedor raíz. |

Forma de CheckboxOption

interface CheckboxOption {
  label: string;
  value: string | number | boolean;
}

Uso

Básico

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

const options = [
  { label: 'Email', value: 'email' },
  { label: 'SMS', value: 'sms' },
  { label: 'Notificación push', value: 'push' },
];

export default function Example() {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <CheckboxGroupField
      label="Canales de notificación"
      options={options}
      selectedValues={selected}
      onChange={(vals) => setSelected(vals as string[])}
    />
  );
}

Con renderizado personalizado de opciones

<CheckboxGroupField
  label="Permisos"
  options={permissionOptions}
  selectedValues={selected}
  onChange={setSelected}
  renderOption={(option, _index, isChecked) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ fontSize: 20 }}>{isChecked ? '✅' : '⬜'}</span>
      <span>{option.label}</span>
    </div>
  )}
/>