Skip to main content

Label

What is Label?​

label is a visual, no-data field. It renders an informational block in a normal DYONA Form grid position, but it does not participate in initialValues and is never included in onSubmit.

It can use grid, fullWidth, helperText, tooltip, visible, and visibleWhen. Use it when application state needs to communicate information without creating a form value.

Available severities are:

  • info (default)
  • success
  • warning
  • error

Minimal example​

{
  "name": "customerNotice",
  "type": "label",
  "label": "Customer account information",
  "helperText": "Review the customer status before continuing.",
  "severity": "info",
  "grid": {
    "xs": 12
  }
}

Visual states​

{"name":"noticeInfo","type":"label","label":"Account information","severity":"info"}
{"name":"noticeSuccess","type":"label","label":"Customer is preferred","severity":"success"}
{"name":"noticeWarning","type":"label","label":"Customer has overdue invoices","severity":"warning"}
{"name":"noticeError","type":"label","label":"Customer is blocked","severity":"error"}

DYONA automatically uses the color and standard icon that correspond to each severity.

Business case: customer status​

The following complete component uses a data select and four conditional labels. It is copy-pasteable and uses only the current public API of @typhonsoftware/dyona-form.

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

const schema: DyonaFormSchema = {
  title: 'Customer operation',
  hideSingleTab: true,
  tabs: [{
    id: 'customer',
    title: 'Customer',
    rows: [{
      columns: [
        {
          name: 'customerStatus', label: 'Customer status', type: 'select',
          options: [
            {value: 'normal', label: 'Normal'},
            {value: 'preferred', label: 'Preferred'},
            {value: 'overdue', label: 'Overdue'},
            {value: 'blocked', label: 'Blocked'},
          ],
          grid: {xs: 12},
        },
        {
          name: 'customerNormal', type: 'label', label: 'Customer account is normal',
          helperText: 'The operation can continue normally.', severity: 'info',
          visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'normal'}, grid: {xs: 12},
        },
        {
          name: 'customerPreferred', type: 'label', label: 'Customer is preferred',
          helperText: 'Apply the commercial conditions for preferred customers.', severity: 'success',
          visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'preferred'}, grid: {xs: 12},
        },
        {
          name: 'customerOverdue', type: 'label', label: 'Customer has overdue invoices',
          helperText: 'Review the current account before confirming the operation.', severity: 'warning',
          visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'overdue'}, grid: {xs: 12},
        },
        {
          name: 'customerBlocked', type: 'label', label: 'Customer is blocked',
          helperText: 'This operation requires an authorized review.', severity: 'error',
          visibleWhen: {field: 'customerStatus', operator: 'equals', value: 'blocked'}, grid: {xs: 12},
        },
      ],
    }],
  }],
  actions: {submit: {label: 'Confirm'}},
};

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

For example, the overdue label depends on the same select:

{
  "name": "customerOverdue",
  "type": "label",
  "label": "Customer has overdue invoices",
  "helperText": "Review the current account before confirming the operation.",
  "severity": "warning",
  "visibleWhen": {
    "field": "customerStatus",
    "operator": "equals",
    "value": "overdue"
  },
  "grid": {"xs": 12}
}

How the flow works​

customerStatus
      ↓
visibleWhen
      ↓
corresponding label

customerStatus belongs to the form data. The labels only react visually to that status and do not appear in the object sent to onSubmit.

This is especially useful for:

  • operational warnings;
  • customer states;
  • commercial restrictions;
  • informative business validations;
  • notices before continuing an operation.

Continue learning​