@umbraco-ui/uui-textarea/custom-elements.json

Custom element wrapping the native textarea element. This is a formAssociated element, meaning it can participate in a native HTMLForm. In browsers other then Chrome it may require a polyfill.

{
  "version": "experimental",
  "tags": [
    {
      "name": "uui-textarea",
      "path": "./lib/uui-textarea.element.ts",
      "attributes": [
        {
          "name": "placeholder",
          "description": "Defines the textarea placeholder.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "disabled",
          "description": "Disables the textarea.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "readonly",
          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "minlength",
          "description": "This is a minimum value of the input.",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "minlength-message",
          "description": "Minlength validation message.",
          "type": "string | ((charsLeft: number) => string)",
          "default": "\"\""
        },
        {
          "name": "maxlength",
          "description": "This is a maximum value of the input.",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "maxlength-message",
          "description": "Maxlength validation message.",
          "type": "string | ((max: number, current: number) => string)",
          "default": "\"\""
        },
        {
          "name": "auto-height",
          "description": "Enables automatic height adjustment. The height will be confined within the min and max height if defined.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "description": "Label to be used for aria-label and eventually as visual label",
          "type": "string"
        },
        {
          "name": "rows",
          "description": "Sets the number of rows of the textarea",
          "type": "number"
        },
        {
          "name": "cols",
          "description": "Sets the number of cols of the textarea",
          "type": "number"
        },
        {
          "name": "wrap",
          "description": "Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.",
          "type": "'soft' | 'hard'",
          "default": "\"undefined\""
        },
        {
          "name": "name",
          "description": "This is a name property of the `<uui-textarea>` component. It reflects the behaviour of the native `<textarea>` element and its name attribute.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "value",
          "description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "required",
          "description": "Apply validation rule for requiring a value of this form control.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "required-message",
          "description": "Required validation message.",
          "type": "string",
          "default": "\"This field is required\""
        },
        {
          "name": "error",
          "description": "Set to true if the component should have an error state. Property is reflected to the corresponding attribute.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "error-message",
          "description": "Custom error message.",
          "type": "string",
          "default": "\"This field is invalid\""
        },
        {
          "name": "pristine",
          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
          "type": "boolean",
          "default": "\"true\""
        }
      ],
      "properties": [
        {
          "name": "placeholder",
          "attribute": "placeholder",
          "description": "Defines the textarea placeholder.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "Disables the textarea.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "readonly",
          "attribute": "readonly",
          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "minlength",
          "attribute": "minlength",
          "description": "This is a minimum value of the input.",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "minlengthMessage",
          "attribute": "minlength-message",
          "description": "Minlength validation message.",
          "type": "string | ((charsLeft: number) => string)",
          "default": "\"\""
        },
        {
          "name": "maxlength",
          "attribute": "maxlength",
          "description": "This is a maximum value of the input.",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "maxlengthMessage",
          "attribute": "maxlength-message",
          "description": "Maxlength validation message.",
          "type": "string | ((max: number, current: number) => string)",
          "default": "\"\""
        },
        {
          "name": "autoHeight",
          "attribute": "auto-height",
          "description": "Enables automatic height adjustment. The height will be confined within the min and max height if defined.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "Label to be used for aria-label and eventually as visual label",
          "type": "string"
        },
        {
          "name": "rows",
          "attribute": "rows",
          "description": "Sets the number of rows of the textarea",
          "type": "number"
        },
        {
          "name": "cols",
          "attribute": "cols",
          "description": "Sets the number of cols of the textarea",
          "type": "number"
        },
        {
          "name": "wrap",
          "attribute": "wrap",
          "description": "Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.",
          "type": "'soft' | 'hard'",
          "default": "\"undefined\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        },
        {
          "name": "formAssociated",
          "description": "This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/",
          "type": "boolean",
          "default": "true"
        },
        {
          "name": "name",
          "attribute": "name",
          "description": "This is a name property of the `<uui-textarea>` component. It reflects the behaviour of the native `<textarea>` element and its name attribute.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "value",
          "attribute": "value",
          "description": "Value of this form control.\nIf you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "required",
          "attribute": "required",
          "description": "Apply validation rule for requiring a value of this form control.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "requiredMessage",
          "attribute": "required-message",
          "description": "Required validation message.",
          "type": "string",
          "default": "\"This field is required\""
        },
        {
          "name": "error",
          "attribute": "error",
          "description": "Set to true if the component should have an error state. Property is reflected to the corresponding attribute.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "errorMessage",
          "attribute": "error-message",
          "description": "Custom error message.",
          "type": "string",
          "default": "\"This field is invalid\""
        },
        {
          "name": "validity",
          "type": "ValidityState"
        },
        {
          "name": "validationMessage",
          "type": "string"
        },
        {
          "name": "pristine",
          "attribute": "pristine",
          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
          "type": "boolean",
          "default": "\"true\""
        }
      ],
      "events": [
        {
          "name": "change",
          "description": "on change"
        },
        {
          "name": "input",
          "description": "on input"
        },
        {
          "name": "keyup",
          "description": "on keyup"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-textarea-min-height",
          "description": "Sets the minimum height of the textarea"
        },
        {
          "name": "--uui-textarea-max-height",
          "description": "Sets the maximum height of the textarea"
        },
        {
          "name": "--uui-textarea-background-color",
          "description": "Sets the background color of the textarea",
          "type": "color"
        },
        {
          "name": "--uui-textarea-font-size",
          "description": "Overwrites the default font size"
        }
      ]
    }
  ]
}