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

Custom element wrapping the native input 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-input",
      "path": "./lib/uui-input.element.ts",
      "description": "Custom element wrapping the native input element.This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.",
      "attributes": [
        {
          "name": "min",
          "description": "Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.",
          "type": "number | string",
          "default": "\"undefined\""
        },
        {
          "name": "minlength",
          "description": "Sets the minimum length of the value of the input.",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "minlength-message",
          "description": "Minlength validation message.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "max",
          "description": "Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.",
          "type": "number | string",
          "default": "\"undefined\""
        },
        {
          "name": "maxlength",
          "description": "Sets the maximum length of the value of the input.",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "maxlength-message",
          "description": "Maxlength validation message.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "step",
          "description": "Specifies the interval between legal numbers of the input",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "disabled",
          "description": "Disables the input.",
          "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": "placeholder",
          "description": "Defines the input placeholder.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "autocomplete",
          "description": "Defines the input autocomplete.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "auto-width",
          "description": "Sets the input width to fit the value or placeholder if empty",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "type",
          "description": "This property specifies the type of input that will be rendered.",
          "type": "'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'",
          "default": "\"text\""
        },
        {
          "name": "pattern",
          "description": "Validates the input based on the Regex pattern",
          "type": "string"
        },
        {
          "name": "inputMode",
          "description": "The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "spellcheck",
          "description": "get/set native spellcheck attribute",
          "type": "boolean"
        },
        {
          "name": "name",
          "description": "get/set the name of the input",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "value",
          "description": "get/set the value of the input",
          "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": "Apply custom error on this input.",
          "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\""
        },
        {
          "name": "label",
          "description": "Label to be used for aria-label and potentially as visual label for some components",
          "type": "string"
        }
      ],
      "properties": [
        {
          "name": "min",
          "attribute": "min",
          "description": "Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.",
          "type": "number | string",
          "default": "\"undefined\""
        },
        {
          "name": "minlength",
          "attribute": "minlength",
          "description": "Sets the minimum length of the value of the input.",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "minlengthMessage",
          "attribute": "minlength-message",
          "description": "Minlength validation message.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "max",
          "attribute": "max",
          "description": "Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.",
          "type": "number | string",
          "default": "\"undefined\""
        },
        {
          "name": "maxlength",
          "attribute": "maxlength",
          "description": "Sets the maximum length of the value of the input.",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "maxlengthMessage",
          "attribute": "maxlength-message",
          "description": "Maxlength validation message.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "step",
          "attribute": "step",
          "description": "Specifies the interval between legal numbers of the input",
          "type": "number",
          "default": "\"undefined\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "Disables the input.",
          "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": "placeholder",
          "attribute": "placeholder",
          "description": "Defines the input placeholder.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "autocomplete",
          "attribute": "autocomplete",
          "description": "Defines the input autocomplete.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "autoWidth",
          "attribute": "auto-width",
          "description": "Sets the input width to fit the value or placeholder if empty",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "type",
          "attribute": "type",
          "description": "This property specifies the type of input that will be rendered.",
          "type": "'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'",
          "default": "\"text\""
        },
        {
          "name": "pattern",
          "attribute": "pattern",
          "description": "Validates the input based on the Regex pattern",
          "type": "string"
        },
        {
          "name": "inputMode",
          "attribute": "inputMode",
          "description": "The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        },
        {
          "name": "spellcheck",
          "attribute": "spellcheck",
          "description": "get/set native spellcheck attribute",
          "type": "boolean"
        },
        {
          "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": "get/set the name of the input",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "value",
          "attribute": "value",
          "description": "get/set the value of the input",
          "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": "Apply custom error on this input.",
          "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\""
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "Label to be used for aria-label and potentially as visual label for some components",
          "type": "string"
        }
      ],
      "events": [
        {
          "name": "change",
          "description": "on change"
        },
        {
          "name": "input",
          "description": "on input"
        },
        {
          "name": "keyup",
          "description": "on keyup"
        }
      ],
      "slots": [
        {
          "name": "prepend",
          "description": "for components to render to the left of the input."
        },
        {
          "name": "append",
          "description": "for components to render to the right of the input."
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-input-height",
          "description": "Height of the element"
        },
        {
          "name": "--uui-input-background-color",
          "description": "Background color of the element"
        },
        {
          "name": "--uui-input-background-color-disabled",
          "description": "Background color when disabled"
        },
        {
          "name": "--uui-input-background-color-readonly",
          "description": "Background color when readonly"
        },
        {
          "name": "--uui-input-border-width",
          "description": "Border width"
        },
        {
          "name": "--uui-input-border-color",
          "description": "Border color"
        },
        {
          "name": "--uui-input-border-color-hover",
          "description": "Border color on hover"
        },
        {
          "name": "--uui-input-border-color-focus",
          "description": "Border color on focus"
        },
        {
          "name": "--uui-input-border-color-disabled",
          "description": "Border color when disabled"
        },
        {
          "name": "--uui-input-border-color-readonly",
          "description": "Border color when readonly"
        }
      ]
    }
  ]
}