Saltar al contenido principal

Label

Qué es Label​

label es un field visual, sin datos. Renderiza un bloque informativo en una posición normal de la grilla de DYONA Form, pero no participa de initialValues ni se incluye en onSubmit.

Puede usar grid, fullWidth, helperText, tooltip, visible y visibleWhen. Usalo cuando el estado de la aplicación deba comunicar información sin crear un valor de formulario.

Las severities disponibles son:

  • info (default)
  • success
  • warning
  • error

Ejemplo mínimo​

{
  "name": "customerNotice",
  "type": "label",
  "label": "Información de la cuenta del cliente",
  "helperText": "Revisá el estado del cliente antes de continuar.",
  "severity": "info",
  "grid": {
    "xs": 12
  }
}

Estados visuales​

{"name":"noticeInfo","type":"label","label":"Información de la cuenta","severity":"info"}
{"name":"noticeSuccess","type":"label","label":"El cliente es preferido","severity":"success"}
{"name":"noticeWarning","type":"label","label":"El cliente tiene facturas vencidas","severity":"warning"}
{"name":"noticeError","type":"label","label":"El cliente está bloqueado","severity":"error"}

DYONA usa automáticamente el color y el icono estándar que corresponden a cada severity.

Caso empresarial: estado del cliente​

El siguiente componente completo usa un select de datos y cuatro labels condicionales. Se puede copiar y pegar, y utiliza únicamente la API pública actual de @typhonsoftware/dyona-form.

import {useState} from 'react';
import {DyonaForm, type DyonaFormSchema, type DyonaFormValues} from '@typhonsoftware/dyona-form';

const schema: DyonaFormSchema = {
  title: 'Operación de cliente', hideSingleTab: true,
  tabs: [{id: 'customer', title: 'Cliente', rows: [{columns: [
    {name: 'customerStatus', label: 'Estado del cliente', type: 'select', options: [{value: 'normal', label: 'Normal'}, {value: 'preferred', label: 'Preferido'}, {value: 'overdue', label: 'Vencido'}, {value: 'blocked', label: 'Bloqueado'}], grid: {xs: 12}},
    {name: 'customerNormal', type: 'label', label: 'La cuenta del cliente está normal', helperText: 'La operación puede continuar normalmente.', severity: 'info', visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'normal'}, grid: {xs: 12}},
    {name: 'customerPreferred', type: 'label', label: 'El cliente es preferido', helperText: 'Aplicá las condiciones comerciales para clientes preferidos.', severity: 'success', visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'preferred'}, grid: {xs: 12}},
    {name: 'customerOverdue', type: 'label', label: 'El cliente tiene facturas vencidas', helperText: 'Revisá la cuenta corriente antes de confirmar la operación.', severity: 'warning', visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'overdue'}, grid: {xs: 12}},
    {name: 'customerBlocked', type: 'label', label: 'El cliente está bloqueado', helperText: 'Esta operación requiere una revisión autorizada.', severity: 'error', visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'blocked'}, grid: {xs: 12}},
  ]}]}], actions: {submit: {label: 'Confirmar'}},
};

export function CustomerStatusForm() {
  const [submittedValues, setSubmittedValues] = useState<DyonaFormValues | null>(null);
  return <><DyonaForm schema={schema} initialValues={{customerStatus: 'normal'}} onSubmit={setSubmittedValues} />{submittedValues && <pre>{JSON.stringify(submittedValues, null, 2)}</pre>}</>;
}

Por ejemplo, el label de vencido depende del mismo select:

{
  "name": "customerOverdue",
  "type": "label",
  "label": "El cliente tiene facturas vencidas",
  "helperText": "Revisá la cuenta corriente antes de confirmar la operación.",
  "severity": "warning",
  "visibleWhen": {"field": "customerStatus", "operator": "equals", "value": "overdue"},
  "grid": {"xs": 12}
}

Cómo funciona el flujo​

customerStatus
      ↓
visibleWhen
      ↓
label correspondiente

customerStatus pertenece a los datos del formulario. Los labels solo reaccionan visualmente a ese estado y no aparecen en el objeto enviado por onSubmit.

Esto es especialmente útil para:

  • advertencias operativas;
  • estados de clientes;
  • restricciones comerciales;
  • validaciones de negocio informativas;
  • avisos antes de continuar una operación.

Continuar aprendiendo​