@vaadin/text-area

{ "$schema": "https://json.schemastore.org/web-types", "name": "@vaadin/text-area", "version": "24.8.5", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "vaadin-text-area", "description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n <div slot=\"prefix\">Details:</div>\n <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.8.5/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", "attributes": [ { "name": "disabled", "description": "If true, the user cannot interact with this element.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "autofocus", "description": "Specify that this control should have input focus when the page loads.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "label", "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "invalid", "description": "Set to true when the field is invalid.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "manual-validation", "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "required", "description": "Specifies that the user must fill in a value.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "error-message", "description": "Error to show when the field is invalid.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "helper-text", "description": "String used for the helper text.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "accessible-name", "description": "String used to label the component to screen reader users.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "accessible-name-ref", "description": "Id of the element used as label of the component to screen reader users.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "value", "description": "The value of the field.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "clear-button-visible", "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "allowed-char-pattern", "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "autoselect", "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "name", "description": "The name of this field.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "placeholder", "description": "A hint to the user of what can be entered in the field.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "readonly", "description": "When present, it specifies that the field is read-only.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "title", "description": "The text usually displayed in a tooltip popup when the mouse is over the field.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "autocomplete", "description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "autocorrect", "description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "autocapitalize", "description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "maxlength", "description": "Maximum number of characters (in Unicode code points) that the user can enter.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "minlength", "description": "Minimum number of characters (in Unicode code points) that the user can enter.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "pattern", "description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "min-rows", "description": "Minimum number of rows to show. Default is two rows.\n\nWhen using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "max-rows", "description": "Maximum number of rows to expand to before the text area starts scrolling. This effectively sets a max-height\non the `input-field` part. By default, it is not set, and the text area grows with the content without\nconstraints.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "theme", "description": "The theme variants to apply to the component.", "value": { "type": [ "string", "null", "undefined" ] } } ], "js": { "properties": [ { "name": "disabled", "description": "If true, the user cannot interact with this element.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "autofocus", "description": "Specify that this control should have input focus when the page loads.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "label", "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "invalid", "description": "Set to true when the field is invalid.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "manualValidation", "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "required", "description": "Specifies that the user must fill in a value.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "errorMessage", "description": "Error to show when the field is invalid.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "helperText", "description": "String used for the helper text.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "accessibleName", "description": "String used to label the component to screen reader users.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "accessibleNameRef", "description": "Id of the element used as label of the component to screen reader users.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "value", "description": "The value of the field.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "clearButtonVisible", "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "allowedCharPattern", "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "autoselect", "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "name", "description": "The name of this field.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "placeholder", "description": "A hint to the user of what can be entered in the field.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "readonly", "description": "When present, it specifies that the field is read-only.", "value": { "type": [ "boolean", "null", "undefined" ] } }, { "name": "title", "description": "The text usually displayed in a tooltip popup when the mouse is over the field.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "autocomplete", "description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "autocorrect", "description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "autocapitalize", "description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "maxlength", "description": "Maximum number of characters (in Unicode code points) that the user can enter.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "minlength", "description": "Minimum number of characters (in Unicode code points) that the user can enter.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "pattern", "description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.", "value": { "type": [ "string", "null", "undefined" ] } }, { "name": "minRows", "description": "Minimum number of rows to show. Default is two rows.\n\nWhen using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.", "value": { "type": [ "number", "null", "undefined" ] } }, { "name": "maxRows", "description": "Maximum number of rows to expand to before the text area starts scrolling. This effectively sets a max-height\non the `input-field` part. By default, it is not set, and the text area grows with the content without\nconstraints.", "value": { "type": [ "number", "null", "undefined" ] } } ], "events": [ { "name": "validated", "description": "Fired whenever the field is validated." }, { "name": "change", "description": "Fired when the user commits a value change." }, { "name": "input", "description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button." }, { "name": "invalid-changed", "description": "Fired when the `invalid` property changes." }, { "name": "value-changed", "description": "Fired when the `value` property changes." } ] } } ] } } }