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

Umbraco UI select component

{
  "version": "experimental",
  "tags": [
    {
      "name": "uui-select",
      "path": "./lib/uui-select.element.ts",
      "description": "Custom element wrapping the native select element. Pass an array of options to it.\nThis is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.",
      "attributes": [
        {
          "name": "label",
          "description": "Text with which component should be labeled",
          "type": "string"
        },
        {
          "name": "placeholder",
          "description": "Defines the select's placeholder.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "disabled",
          "description": "Disables the select.",
          "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": "disabledGroups",
          "description": "An array of options to be rendered by the element. Put the names of the groups you wanna disable, separated by a coma: `disabledGroups='fruits, vegetables'`. It's not case sensitive",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "name",
          "description": "This is a name property of the component.",
          "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": "label",
          "attribute": "label",
          "description": "Text with which component should be labeled",
          "type": "string"
        },
        {
          "name": "placeholder",
          "attribute": "placeholder",
          "description": "Defines the select's placeholder.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "Disables the select.",
          "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": "options",
          "description": "An array of options to be rendered by the element. If you want the element The option interface has up to 5 properties:\n`interface Option {\nname: string;\nvalue: string;\ngroup?: string;\nselected?: boolean;\ndisabled?: boolean;\n}`",
          "type": "Option[]",
          "default": "[]"
        },
        {
          "name": "disabledGroups",
          "attribute": "disabledGroups",
          "description": "An array of options to be rendered by the element. Put the names of the groups you wanna disable, separated by a coma: `disabledGroups='fruits, vegetables'`. It's not case sensitive",
          "type": "string",
          "default": "\"\""
        },
        {
          "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.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead 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 component.",
          "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": "when the user changes value"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-select-height",
          "description": "Height of the element"
        },
        {
          "name": "--uui-select-font-size",
          "description": "Font size of the element"
        },
        {
          "name": "--uui-select-text-color",
          "description": "Color of the text"
        },
        {
          "name": "--uui-select-padding-y",
          "description": "Padding on the y axis"
        },
        {
          "name": "--uui-select-padding-x",
          "description": "Padding on the x axis"
        },
        {
          "name": "--uui-select-border-color",
          "description": "Border color"
        },
        {
          "name": "--uui-select-border-color-hover",
          "description": "Border color on hover"
        },
        {
          "name": "--uui-select-selected-option-background-color",
          "description": "Background color of the selected option"
        },
        {
          "name": "--uui-select-selected-option-color",
          "description": "Color of the selected option"
        },
        {
          "name": "--uui-select-outline-color",
          "description": "Outline color"
        },
        {
          "name": "--uui-select-background-color",
          "description": "Background color"
        },
        {
          "name": "--uui-select-disabled-background-color",
          "description": "Background color when disabled"
        }
      ]
    }
  ]
}