RadioField

RadioField envuelve el componente Radio dentro de un FieldContainer. Renderiza una lista de opciones y llama a onChange con el valor de la opción seleccionada. Una función renderOption personalizada puede reemplazar completamente la apariencia predeterminada del radio button.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | options | any[] | Sí | — | Array de objetos de opción. Cada objeto debe tener al menos las claves value y label. | | value | string | Sí | — | Valor de la opción seleccionada actualmente. | | onChange | (optionName: string) => void | Sí | — | Llamado con el valor de la opción seleccionada cuando el usuario elige una diferente. | | label | string | No | — | Etiqueta mostrada en el encabezado del campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo. | | useCustomRender | boolean | No | false | Cuando es true, renderOption se pasa al componente Radio para reemplazar el layout predeterminado. | | renderOption | (option: any, isClickable?: boolean, index?: number, isActive?: boolean) => React.ReactNode | No | — | Función de renderizado personalizada para cada opción (solo se usa cuando useCustomRender es true). | | containerStyle | React.CSSProperties | No | — | Estilos del FieldContainer exterior. | | headerStyle | React.CSSProperties | No | — | Estilos del área de encabezado del campo. | | bodyStyle | React.CSSProperties | No | — | Estilos del cuerpo de opciones (pasado como containerStyle a Radio). | | 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 exterior. |

Uso

Básico

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

const options = [
  { label: 'Interno', value: 'internal' },
  { label: 'Externo', value: 'external' },
];

export default function Example() {
  const [userType, setUserType] = useState('internal');

  return (
    <RadioField
      label="Tipo de usuario"
      options={options}
      value={userType}
      onChange={setUserType}
    />
  );
}

Con renderizado personalizado de opciones

<RadioField
  label="Prioridad"
  options={[
    { label: 'Baja', value: 'low', color: '#4CC2B6' },
    { label: 'Media', value: 'medium', color: '#FFD567' },
    { label: 'Alta', value: 'high', color: '#F59A8E' },
  ]}
  value={priority}
  onChange={setPriority}
  useCustomRender={true}
  renderOption={(option, _clickable, _index, isActive) => (
    <div style={{
      padding: '8px 16px',
      borderRadius: 8,
      backgroundColor: isActive ? option.color : '#f0f0f0',
      fontWeight: isActive ? 'bold' : 'normal',
    }}>
      {option.label}
    </div>
  )}
/>