{
"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",
"level": "atom",
"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/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/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/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": "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.",
"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."
},
{
"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.",
"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.",
"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."
},
{
"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.",
"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.",
"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."
}
],
"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 `` 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 ``) 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 `undefined`, 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 ``) 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 `undefined`, 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 `