{
  "tag": "ed-input",
  "kind": "component",
  "summary": "Lets the user type a single short value on one line — name, email, amount, search term — in a form field\nwith label and validation.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/input/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/input/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon"
  ],
  "use": [
    "Capturing a single short value the user types on one line — a name, email address, amount, telephone number, URL, password, or search term",
    "The standard building block for form fields in data-entry screens across payroll, accounting, and tax workflows",
    "A search field above a table where a user types an invoice number or client name to narrow the list",
    "A required text field in a form, such as a client name, with a clear error when it is left empty",
    "A password or e-mail address field on a sign-in or account screen"
  ],
  "notFor": [
    {
      "when": "Multi-line or free-form text like comments, notes, or descriptions",
      "instead": "[Textarea](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/textarea)"
    },
    {
      "when": "Picking from a fixed, known set of options",
      "instead": "[Select](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/select)"
    },
    {
      "when": "A value chosen from a large searchable list of options",
      "instead": "[Combobox](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/combobox)"
    },
    {
      "when": "Dates and times — the `date`, `time` or `datetime-local` types, even though it accepts them",
      "instead": "[Date Picker](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/date-picker), which covers dates, times and both together; for a date the user already knows, such as a birthday, [Known Date](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/known-date)"
    }
  ],
  "rules": [
    {
      "id": "input/visible-label",
      "rule": "Give every field in a form a persistent, visible label — short, descriptive and in plain language — and never rely on placeholder text as the label. Outside a form, a field whose surroundings already say what it is — the search field above a list, its placeholder reading \"Search\" — may go without one; an `aria-label` names it then.",
      "why": "Placeholder text disappears the moment the user types, leaving them with no reminder of what the field expected — a confirmed source of re-entry errors in long forms.",
      "check": "error"
    },
    {
      "id": "input/type-matches-data",
      "rule": "Choose the input type that matches the data (email, number, telephone, and so on).",
      "why": "Users get the right on-screen keyboard and sensible built-in checks.",
      "check": "warning"
    },
    {
      "id": "input/free-amounts",
      "rule": "Capture free numeric amounts such as prices with the number type — the unit (such as a € icon) in the end slot, the spin buttons hidden. Reserve [Number Input](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/number-input) for countable quantities where stepping up and down genuinely helps.",
      "check": "warning"
    },
    {
      "id": "input/hint-for-format",
      "rule": "Add a hint below the field when users need to know the expected format, and keep it short and specific — never placeholder text as a substitute for a hint."
    },
    {
      "id": "input/required",
      "rule": "Set `required` on mandatory fields and explain the required-marking convention once per form. Don't add your own required indicator — the label picks it up automatically."
    },
    {
      "id": "input/error-timing",
      "rule": "Don't add your own timing for validation errors — the component shows them only after the user has typed and left the field, or on submit. Never show a red border, an error icon or an error message on page load or on focus, before the user has typed anything.",
      "check": "error"
    },
    {
      "id": "input/specific-errors",
      "rule": "Write a specific, actionable message for each custom validation error — never a vague one like \"Invalid input\", \"Error\" or \"Required\". Don't write your own for the standard constraints (required, pattern, length) — the component has their messages.",
      "check": "error"
    },
    {
      "id": "input/clear-button",
      "rule": "Add a clear button (`with-clear`) to search fields and other fields users frequently empty and re-enter.",
      "check": "error"
    },
    {
      "id": "input/password-toggle",
      "rule": "Offer a password reveal toggle on password fields, so users can check what they typed.",
      "check": "error"
    },
    {
      "id": "input/readonly-not-disabled",
      "rule": "Use read-only for a value the user can never change, and disabled only when it could become editable under some condition."
    },
    {
      "id": "input/min-width",
      "rule": "Keep the field at least 8.75rem (140px) wide, even for short values like postal codes.",
      "why": "The value, the label and any icons stay legible.",
      "check": "error"
    },
    {
      "id": "input/grid-widths",
      "rule": "Align fields on a grid, with widths proportional to their content — never a stack of many full-width fields of arbitrary widths."
    },
    {
      "id": "input/ai-suggested",
      "rule": "Use the AI-suggested state to flag a value the system pre-filled, so users can tell it apart from their own entries."
    },
    {
      "id": "input/default-density",
      "rule": "Keep `density` at its default. Choose `compact` or `spacious` only deliberately for a specifically tighter or looser layout, or `compact` for a control inside a [Data Grid](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/data-grid) — never to fine-tune spacing case by case.",
      "why": "The default suits standard forms and layouts, and it is the intended spacing for almost every screen.",
      "check": "warning"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "title",
        "property": "title",
        "type": "string",
        "default": "''"
      },
      {
        "name": "type",
        "property": "type",
        "type": "'number' | 'search' | 'text' | 'date' | 'time' | 'datetime-local' | 'email' | 'password' | 'tel' | 'url'",
        "default": "'text'",
        "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`."
      },
      {
        "name": "value",
        "property": "defaultValue",
        "type": "string",
        "description": "The default value of the form control. Primarily used for resetting the form control."
      },
      {
        "name": "density",
        "property": "density",
        "type": "'compact' | 'default' | 'spacious'",
        "default": "'default'",
        "description": "Controls the component's spacing density without affecting font-size."
      },
      {
        "name": "pill",
        "property": "pill",
        "type": "boolean",
        "default": "false",
        "description": "Draws a pill-style input with rounded edges."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "The input's label. If you need to display HTML, use the `label` slot instead."
      },
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "The input's accessible name for when no visible label is set (e.g. an icon-only search\nfield). Mirrored onto the internal input, where the textbox role lives — an aria-label\nleft on the host alone would sit on a role-less element and be ignored by assistive tech."
      },
      {
        "name": "with-clear",
        "property": "withClear",
        "type": "boolean",
        "default": "false",
        "description": "Adds a clear button when the input is not empty, and makes Escape empty the field."
      },
      {
        "name": "placeholder",
        "property": "placeholder",
        "type": "string",
        "default": "''",
        "description": "Placeholder text to show as a hint when the input is empty."
      },
      {
        "name": "readonly",
        "property": "readonly",
        "type": "boolean",
        "default": "false",
        "description": "Makes the input readonly."
      },
      {
        "name": "password-toggle",
        "property": "passwordToggle",
        "type": "boolean",
        "default": "false",
        "description": "Adds a button to toggle the password's visibility. Only applies to password types."
      },
      {
        "name": "password-visible",
        "property": "passwordVisible",
        "type": "boolean",
        "default": "false",
        "description": "Determines whether or not the password is currently visible. Only applies to password input types."
      },
      {
        "name": "without-spin-buttons",
        "property": "withoutSpinButtons",
        "type": "boolean",
        "default": "false",
        "description": "Hides the browser's built-in increment/decrement spin buttons for number inputs."
      },
      {
        "name": "required",
        "property": "required",
        "type": "boolean",
        "default": "false",
        "description": "Makes the input a required field."
      },
      {
        "name": "pattern",
        "property": "pattern",
        "type": "string",
        "description": "A regular expression pattern to validate input against."
      },
      {
        "name": "minlength",
        "property": "minlength",
        "type": "number",
        "description": "The minimum length of input that will be considered valid."
      },
      {
        "name": "maxlength",
        "property": "maxlength",
        "type": "number",
        "description": "The maximum length of input that will be considered valid."
      },
      {
        "name": "min",
        "property": "min",
        "type": "string | number",
        "description": "The input's minimum value. Only applies to date and number input types."
      },
      {
        "name": "max",
        "property": "max",
        "type": "string | number",
        "description": "The input's maximum value. Only applies to date and number input types."
      },
      {
        "name": "step",
        "property": "step",
        "type": "number | 'any'",
        "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types."
      },
      {
        "name": "autocapitalize",
        "property": "autocapitalize",
        "type": "'none' | 'off' | 'on' | 'sentences' | 'words' | 'characters'",
        "description": "Controls whether and how text input is automatically capitalized as it is entered by the user."
      },
      {
        "name": "autocorrect",
        "property": "autocorrect",
        "type": "boolean",
        "description": "Indicates whether the browser's autocorrect feature is on or off. When set as an attribute, use `\"off\"` or `\"on\"`.\nWhen set as a property, use `true` or `false`."
      },
      {
        "name": "autocomplete",
        "property": "autocomplete",
        "type": "string",
        "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values."
      },
      {
        "name": "autofocus",
        "property": "autofocus",
        "type": "boolean",
        "description": "Indicates that the input should receive focus on page load."
      },
      {
        "name": "enterkeyhint",
        "property": "enterkeyhint",
        "type": "'next' | 'previous' | 'search' | 'send' | 'done' | 'enter' | 'go'",
        "description": "Used to customize the label or icon of the Enter key on virtual keyboards."
      },
      {
        "name": "spellcheck",
        "property": "spellcheck",
        "type": "boolean",
        "default": "true",
        "description": "Enables spell checking on the input."
      },
      {
        "name": "inputmode",
        "property": "inputmode",
        "type": "'search' | 'text' | 'numeric' | 'none' | 'email' | 'tel' | 'url' | 'decimal'",
        "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices."
      },
      {
        "name": "with-label",
        "property": "withLabel",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `label` element so the server-rendered markup includes the label before the component hydrates on the client."
      },
      {
        "name": "with-hint",
        "property": "withHint",
        "type": "boolean",
        "default": "false",
        "description": "Only required for SSR. Set to `true` if you're slotting in a `hint` element so the server-rendered markup includes the hint before the component hydrates on the client."
      },
      {
        "name": "error",
        "property": "error",
        "type": "null | string",
        "default": "null",
        "description": "Draws an error-style input with danger colored border and icon. Set to an empty string (or use the bare attribute `<ed-input error>`) to render error styling without a visible message; submission is still blocked with a localized fallback validation message. Set to a non-empty string to additionally display that message in the message area, above the hint, and use it as the validation message. Set to `null` (the default) or remove the attribute to clear the error."
      },
      {
        "name": "warning",
        "property": "warning",
        "type": "null | string",
        "default": "null",
        "description": "Draws a warning-style input with warning colored border and icon. Set to an empty string (or use the bare attribute `<ed-input warning>`) to render warning styling without a visible message. Set to a non-empty string to additionally display that message in the message area, above the hint. Warnings do not block form submission. Set to `null` (the default) or remove the attribute to clear the warning."
      },
      {
        "name": "ai",
        "property": "ai",
        "type": "boolean",
        "default": "false",
        "description": "Draws an ai-style input with AI colored border and icon. Suppressed visually once\n`hasInteracted` flips, but the property and attribute are preserved so the styling\nreturns after `formResetCallback` clears `hasInteracted`."
      },
      {
        "name": "hint",
        "property": "hint",
        "type": "string",
        "default": "''",
        "description": "The form control's hint text. If you need to display HTML, use the `hint` slot instead."
      },
      {
        "name": "name",
        "property": "name",
        "type": "null | string",
        "default": "null",
        "description": "The name of the input, submitted as a name/value pair with form data."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "description": "Disables the form control. HTML treats a control as disabled when either its own `disabled` is\nset or an ancestor `<fieldset>` is disabled, so reading this reports the combined state while\nwriting it sets only this element's own. Keeping the two apart is what lets a fieldset be\nre-enabled without clearing a disabled state the consumer set in the meantime."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "input",
        "type": "(HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement | undefined",
        "description": "The native control, in this element's light DOM rather than its shadow root. Firefox's password\nmanager and its address autofill only consider an `HTMLInputElement` in the form's own tree\n(`form.elements` filtered by `HTMLInputElement.isInstance`), so a control inside the shadow root is\nnever filled — Mozilla bug 1659224. The control carries no `name`: the host stays the\nform-associated element that submits, validates and resets, and the control only contributes what\nthe user types."
      },
      {
        "name": "value",
        "type": "string",
        "description": "The current value of the input, submitted as a name/value pair with form data. Empty is `''`,\nas on a native input — never `null`."
      },
      {
        "name": "validationTarget",
        "type": "undefined | HTMLElement",
        "description": "The control, while it is this element's child — the only place ElementInternals accepts it."
      },
      {
        "name": "form",
        "type": "HTMLFormElement | null",
        "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work."
      }
    ],
    "methods": [
      {
        "name": "focus",
        "parameters": [
          {
            "name": "options",
            "type": "FocusOptions",
            "optional": true
          }
        ],
        "description": "Sets focus on the input."
      },
      {
        "name": "blur",
        "description": "Removes focus from the input."
      },
      {
        "name": "select",
        "description": "Selects all the text in the input."
      },
      {
        "name": "setSelectionRange",
        "parameters": [
          {
            "name": "selectionStart",
            "type": "number"
          },
          {
            "name": "selectionEnd",
            "type": "number"
          },
          {
            "name": "selectionDirection",
            "type": "'forward' | 'backward' | 'none'"
          }
        ],
        "description": "Sets the start and end positions of the text selection (0-based)."
      },
      {
        "name": "setRangeText",
        "parameters": [
          {
            "name": "replacement",
            "type": "string"
          },
          {
            "name": "start",
            "type": "number",
            "optional": true
          },
          {
            "name": "end",
            "type": "number",
            "optional": true
          },
          {
            "name": "selectMode",
            "type": "'select' | 'start' | 'end' | 'preserve'"
          }
        ],
        "description": "Replaces a range of text with a new string."
      },
      {
        "name": "showPicker",
        "description": "Displays the browser picker for an input element (only works if the browser supports it for the input type)."
      },
      {
        "name": "stepUp",
        "description": "Increments the value of a numeric input type by the value of the step attribute."
      },
      {
        "name": "stepDown",
        "description": "Decrements the value of a numeric input type by the value of the step attribute."
      },
      {
        "name": "setCustomValidity",
        "parameters": [
          {
            "name": "message",
            "type": "string"
          }
        ],
        "description": "Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators."
      },
      {
        "name": "resetValidity",
        "description": "Reset validity is a way of removing manual custom errors and native validation."
      }
    ],
    "events": [
      {
        "name": "change",
        "react": "onChange",
        "type": "Event",
        "description": "Emitted when an alteration to the control's value is committed by the user."
      },
      {
        "name": "input",
        "react": "onInput",
        "type": "InputEvent",
        "description": "Emitted when the control receives input."
      },
      {
        "name": "blur",
        "react": "onBlur",
        "description": "Emitted when the control loses focus."
      },
      {
        "name": "focus",
        "react": "onFocus",
        "description": "Emitted when the control gains focus."
      },
      {
        "name": "ed-clear",
        "react": "onEdClear",
        "description": "Emitted when the control's value is cleared."
      },
      {
        "name": "ed-invalid",
        "react": "onEdInvalid",
        "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
      }
    ],
    "slots": [
      {
        "name": "label",
        "description": "The input's label. Alternatively, you can use the `label` attribute."
      },
      {
        "name": "start",
        "description": "An element, such as `<ed-icon>`, placed at the start of the input control."
      },
      {
        "name": "end",
        "description": "An element, such as `<ed-icon>`, placed at the end of the input control."
      },
      {
        "name": "clear-icon",
        "description": "An icon to use in lieu of the default clear icon."
      },
      {
        "name": "show-password-icon",
        "description": "An icon to use in lieu of the default show password icon."
      },
      {
        "name": "hide-password-icon",
        "description": "An icon to use in lieu of the default hide password icon."
      },
      {
        "name": "hint",
        "description": "Text that describes how to use the input. Alternatively, you can use the `hint` attribute."
      },
      {
        "name": "control",
        "description": "Not for consumers. Holds the native `<input>` the element renders into its own light DOM, where browsers' password managers and form autofill can find it. The element creates it; style it through the `base` part, whose typography it inherits."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-input-text-align",
        "description": "How the value is aligned inside the field. Defaults to `start`; `end` suits amounts and other figures. Setting `text-align` on the element itself does not reach the value — the browser's own stylesheet sets it on the inner control — and would align the label and hint instead."
      }
    ],
    "parts": [
      {
        "name": "label",
        "description": "The label"
      },
      {
        "name": "message",
        "description": "The state message: an error, a warning, or the AI note."
      },
      {
        "name": "hint",
        "description": "The hint's wrapper."
      },
      {
        "name": "base",
        "description": "The wrapper being rendered as an input"
      },
      {
        "name": "start",
        "description": "The container that wraps the `start` slot."
      },
      {
        "name": "clear-button",
        "description": "The clear button."
      },
      {
        "name": "password-toggle-button",
        "description": "The password toggle button."
      },
      {
        "name": "end",
        "description": "The container that wraps the `end` slot."
      }
    ],
    "states": [
      {
        "name": "blank",
        "description": "The input is empty."
      },
      {
        "name": "disabled",
        "description": "The control is disabled, by its own attribute or by an ancestor fieldset."
      },
      {
        "name": "required",
        "description": "The control is required."
      },
      {
        "name": "optional",
        "description": "The control is not required."
      },
      {
        "name": "invalid",
        "description": "The value fails constraint validation, whether or not the user has touched the control yet."
      },
      {
        "name": "valid",
        "description": "The value passes constraint validation."
      },
      {
        "name": "user-invalid",
        "description": "Invalid, and the user has interacted with the control. This is the one to style for an error: it behaves like the platform's `:user-invalid`, so an untouched field is not marked wrong before the user has had a chance to fill it in."
      },
      {
        "name": "user-valid",
        "description": "Valid, and the user has interacted with the control."
      },
      {
        "name": "dirty",
        "description": "The user has interacted with the control."
      },
      {
        "name": "error",
        "description": "The `error` property is set, or the control is `user-invalid`."
      },
      {
        "name": "warning",
        "description": "The `warning` property is set."
      },
      {
        "name": "ai",
        "description": "The `ai` property is set and the user has not interacted with the control yet."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/input/input.js';",
  "react": {
    "component": "EdInput",
    "import": "import EdInput from '@eurodata/eurodata-ui/dist/react/input/index.js';"
  }
}