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

Umbraco style toggle component

{
  "version": "experimental",
  "tags": [
    {
      "name": "uui-toggle",
      "path": "./lib/uui-toggle.element.ts",
      "description": "Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.",
      "attributes": [
        {
          "name": "label-position",
          "description": "Specifies the label position of the checkbox or the toggle",
          "type": "'left' | 'right' | 'top' | 'bottom'",
          "default": "\"right\""
        },
        {
          "name": "checked",
          "description": "Reflects the state of the element.\nTrue if checkbox or toggle is checked. Change this to switch the state programmatically.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "indeterminate",
          "description": "Indeterminate state for the input.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "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": "name",
          "description": "This is a name property of the component.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "value",
          "description": "intentional overwrite of FormControlMixins value getter and 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": "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": "labelPosition",
          "attribute": "label-position",
          "description": "Specifies the label position of the checkbox or the toggle",
          "type": "'left' | 'right' | 'top' | 'bottom'",
          "default": "\"right\""
        },
        {
          "name": "checked",
          "attribute": "checked",
          "description": "Reflects the state of the element.\nTrue if checkbox or toggle is checked. Change this to switch the state programmatically.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "indeterminate",
          "attribute": "indeterminate",
          "description": "Indeterminate state for the input.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "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": "styles",
          "type": "CSSResult[]",
          "default": "[null,\"UUIHorizontalShakeKeyframes\",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 component.",
          "type": "string",
          "default": "\"''\""
        },
        {
          "name": "value",
          "attribute": "value",
          "description": "intentional overwrite of FormControlMixins value getter and 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": "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": "fires when the element is begin checked by a user action"
        },
        {
          "name": "change",
          "description": "on change"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-toggle-size",
          "description": "Define the toggle size."
        },
        {
          "name": "--uui-toggle-switch-width",
          "description": "Define the slider width."
        },
        {
          "name": "--uui-toggle-background-color",
          "description": "Set the toggle background color"
        },
        {
          "name": "--uui-toggle-border-color",
          "description": "Set the toggle border color"
        },
        {
          "name": "--uui-toggle-border-color-hover",
          "description": "Set the toggle background color when hovered"
        },
        {
          "name": "--uui-toggle-background-color-hover",
          "description": "Set the toggle background color when hovered"
        },
        {
          "name": "--uui-toggle-border-color-focus",
          "description": "Set the toggle background color when focused"
        },
        {
          "name": "--uui-toggle-background-color-focus",
          "description": "Set the toggle background color when focused"
        }
      ]
    }
  ]
}