bootstrap-vue/src/components/form-group/package.json

BootstrapVue, with over 40 plugins and more than 80 custom components, custom directives, and over 300 icons, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-AR

{
  "name": "@bootstrap-vue/form-group",
  "version": "1.0.0",
  "meta": {
    "title": "Form Group",
    "description": "Easily add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as visual (color) contextual state feedback.",
    "components": [
      {
        "component": "BFormGroup",
        "alias": [
          "BFormFieldset"
        ],
        "props": [
          {
            "prop": "disabled",
            "description": "Disabled the fieldset element, which in turn disables the form controls (on browsers that support disabled fieldsets). Has no effect if 'label-for' is set"
          },
          {
            "prop": "label",
            "description": "Text to place in the label/legend of the form group"
          },
          {
            "prop": "labelFor",
            "description": "Set to the ID of the singular form-control in the form-group. Do not set a value if there is more than one form control in the group."
          },
          {
            "prop": "labelSrOnly",
            "description": "Visually hides the label content, but makes it available to screen reader users"
          },
          {
            "prop": "description",
            "description": "Text to place in the help text area of the form group"
          },
          {
            "prop": "invalidFeedback",
            "description": "Text to show when the form group has an invalid state"
          },
          {
            "prop": "validFeedback",
            "description": "Text to show when the form group has a valid state"
          },
          {
            "prop": "feedbackAriaLive",
            "description": "Value to use for the 'aria-live' attribute on the feedback text"
          },
          {
            "prop": "labelCols",
            "description": "Number of columns for the label width xs screens and up"
          },
          {
            "prop": "labelColsSm",
            "description": "Number of columns for the label width sm screens and up"
          },
          {
            "prop": "labelColsMd",
            "description": "Number of columns for the label width md screens and up"
          },
          {
            "prop": "labelColsLg",
            "description": "Number of columns for the label width lg screens and up"
          },
          {
            "prop": "labelColsXl",
            "description": "Number of columns for the label width xl screens and up"
          },
          {
            "prop": "labelClass",
            "description": "CSS class (or classes) to add to the label/legend element"
          },
          {
            "prop": "labelAlign",
            "description": "Text alignment 'left', 'center', 'right' for the label xs screens and up"
          },
          {
            "prop": "labelAlignSm",
            "description": "Text alignment 'left', 'center', 'right' for the label sm screens and up"
          },
          {
            "prop": "labelAlignMd",
            "description": "Text alignment 'left', 'center', 'right' for the label md screens and up"
          },
          {
            "prop": "labelAlignLg",
            "description": "Text alignment 'left', 'center', 'right' for the label lg screens and up"
          },
          {
            "prop": "labelAlignXl",
            "description": "Text alignment 'left', 'center', 'right' for the label xl screens and up"
          },
          {
            "prop": "labelClass",
            "description": "CSS class (or classes) to add to the label/legend element"
          },
          {
            "prop": "labelSize",
            "description": "Sets the text size of the label: 'sm', 'md' (default) or 'lg'. Use this prop to have the label size match the form control size"
          },
          {
            "prop": "state",
            "description": "Controls the validation state of the feedback. 'true' force shows valid-feedback, 'false' force shows invalid feedback, 'null' does not force show the feedback"
          },
          {
            "prop": "tooltip",
            "description": "Renders the feedback text in a rudimentary tooltip style"
          },
          {
            "prop": "validated",
            "description": "When set, adds the Bootstrap validation trigger class 'was-validated' on the component"
          }
        ],
        "slots": [
          {
            "name": "label",
            "description": "Content to place inside the <label> element."
          },
          {
            "name": "description",
            "description": "Content to place in the description area."
          },
          {
            "name": "invalid-feedback",
            "description": "Content to place in the invalid feedback area"
          },
          {
            "name": "valid-feedback",
            "description": "Content to place in the valid feedback area"
          }
        ]
      }
    ]
  }
}