{
  "subject": "form-controls",
  "title": "Form Controls",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/theming/form-controls/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/theming/form-controls/usage/",
  "use": [],
  "notFor": [],
  "rules": [
    {
      "id": "form-controls/visible-label",
      "rule": "In a form, give every control a persistent, visible label — short, descriptive and in plain language — and never placeholder text in its place. Outside a form the container decides whether the label shows; where it does not, `aria-label` gives the control its name.",
      "why": "Placeholder text disappears the moment the user types, leaving no reminder of what the field expected.",
      "for": [
        "ed-input",
        "ed-textarea",
        "ed-number-input",
        "ed-select",
        "ed-combobox",
        "ed-date-picker",
        "ed-known-date",
        "ed-tag-input",
        "ed-slider"
      ],
      "check": "error"
    },
    {
      "id": "form-controls/required",
      "rule": "Set `required` on a mandatory control and explain the required-marking convention once per form. Never add your own required indicator — the label picks it up.",
      "for": [
        "ed-input",
        "ed-textarea",
        "ed-number-input",
        "ed-select",
        "ed-combobox",
        "ed-date-picker",
        "ed-known-date",
        "ed-tag-input",
        "ed-file-input",
        "ed-checkbox",
        "ed-switch",
        "ed-radio-group",
        "ed-rating"
      ]
    },
    {
      "id": "form-controls/error-timing",
      "rule": "Never show a validation error before the user has interacted with the control — not on page load, not on focus alone, not while they are still typing. Don't add your own timing: the control shows its errors after the user has left it or changed its value, and on submit.",
      "for": [
        "ed-input",
        "ed-textarea",
        "ed-number-input",
        "ed-select",
        "ed-combobox",
        "ed-date-picker",
        "ed-known-date",
        "ed-tag-input",
        "ed-file-input",
        "ed-checkbox",
        "ed-switch",
        "ed-radio-group"
      ],
      "check": "error"
    },
    {
      "id": "form-controls/message-never-silenced",
      "rule": "Keep a message on every error. Write your own where the built-in wording does not fit — it replaces the built-in one — but never set `error` to an empty string or hide the message part: the error styling alone says that something is wrong, not what.",
      "for": [
        "ed-input",
        "ed-textarea",
        "ed-number-input",
        "ed-select",
        "ed-combobox",
        "ed-date-picker",
        "ed-known-date",
        "ed-tag-input",
        "ed-file-input",
        "ed-checkbox",
        "ed-switch",
        "ed-radio-group"
      ],
      "check": "error"
    },
    {
      "id": "form-controls/readonly-not-disabled",
      "rule": "Use `readonly` for a value the user can never change — a calculated total, an assigned id — and `disabled` only while it could become editable under some condition.",
      "why": "Disabled implies the value could be unlocked, and a disabled control submits nothing; a read-only one submits its value.",
      "for": [
        "ed-input",
        "ed-textarea",
        "ed-number-input",
        "ed-select",
        "ed-combobox",
        "ed-date-picker",
        "ed-known-date",
        "ed-tag-input",
        "ed-checkbox",
        "ed-switch",
        "ed-radio-group",
        "ed-rating",
        "ed-slider"
      ]
    },
    {
      "id": "form-controls/min-width",
      "rule": "Keep a field at least 8.75rem (140px) wide, even for short values such as postal codes — and comfortably wider for prose.",
      "why": "The value, the label and any icons stay legible.",
      "for": [
        "ed-input",
        "ed-textarea",
        "ed-number-input",
        "ed-select",
        "ed-combobox",
        "ed-date-picker",
        "ed-known-date",
        "ed-tag-input",
        "ed-file-input"
      ],
      "check": "error",
      "covered": true
    },
    {
      "id": "form-controls/default-density",
      "rule": "Keep `density` at its default, and the same for every control in one row or form. Choose `compact` or `spacious` only where the user asks for it or the space leaves no other way — a form with many fields is no reason — and then for the whole layout, never to fine-tune spacing case by case. Where a container decides the density of the controls inside it, its rules say so.",
      "why": "The default is the intended spacing for almost every screen.",
      "for": [
        "ed-input",
        "ed-textarea",
        "ed-number-input",
        "ed-select",
        "ed-combobox",
        "ed-date-picker",
        "ed-known-date",
        "ed-tag-input",
        "ed-rating",
        "ed-button"
      ],
      "check": "warning"
    },
    {
      "id": "form-controls/ai-suggested",
      "rule": "Set `ai` on a control whose value the system pre-filled, so users can tell it apart from their own entries; the state clears once they touch it.",
      "for": [
        "ed-input",
        "ed-textarea",
        "ed-number-input",
        "ed-select",
        "ed-combobox",
        "ed-date-picker",
        "ed-tag-input",
        "ed-checkbox",
        "ed-switch",
        "ed-radio-group"
      ]
    }
  ]
}