@gitlab/ui 114.1.0 → 114.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/dist/components/base/breadcrumb/breadcrumb.js +4 -16
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +7 -26
  5. package/src/components/base/breadcrumb/breadcrumb.scss +18 -2
  6. package/src/components/base/breadcrumb/breadcrumb.vue +4 -17
  7. package/CHANGELOG.md +0 -13139
  8. package/src/vendor/bootstrap/LICENSE +0 -11
  9. package/src/vendor/bootstrap-vue/LICENSE +0 -11
  10. package/src/vendor/bootstrap-vue/package.json +0 -144
  11. package/src/vendor/bootstrap-vue/src/components/button/MODIFICATIONS.md +0 -16
  12. package/src/vendor/bootstrap-vue/src/components/button/README.md +0 -240
  13. package/src/vendor/bootstrap-vue/src/components/button/button-close.spec.js +0 -210
  14. package/src/vendor/bootstrap-vue/src/components/button/button.spec.js +0 -349
  15. package/src/vendor/bootstrap-vue/src/components/button/package.json +0 -105
  16. package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +0 -730
  17. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-divider.spec.js +0 -58
  18. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-form.spec.js +0 -110
  19. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-group.spec.js +0 -94
  20. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-header.spec.js +0 -73
  21. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.spec.js +0 -117
  22. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item.spec.js +0 -147
  23. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-text.spec.js +0 -59
  24. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.spec.js +0 -1121
  25. package/src/vendor/bootstrap-vue/src/components/dropdown/package.json +0 -368
  26. package/src/vendor/bootstrap-vue/src/components/form/README.md +0 -365
  27. package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.spec.js +0 -170
  28. package/src/vendor/bootstrap-vue/src/components/form/form-text.spec.js +0 -93
  29. package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.spec.js +0 -157
  30. package/src/vendor/bootstrap-vue/src/components/form/form.spec.js +0 -97
  31. package/src/vendor/bootstrap-vue/src/components/form/package.json +0 -112
  32. package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +0 -691
  33. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group.spec.js +0 -525
  34. package/src/vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox.spec.js +0 -922
  35. package/src/vendor/bootstrap-vue/src/components/form-checkbox/package.json +0 -172
  36. package/src/vendor/bootstrap-vue/src/components/form-group/README.md +0 -339
  37. package/src/vendor/bootstrap-vue/src/components/form-group/form-group.spec.js +0 -477
  38. package/src/vendor/bootstrap-vue/src/components/form-group/package.json +0 -183
  39. package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +0 -437
  40. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio-group.spec.js +0 -357
  41. package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio.spec.js +0 -587
  42. package/src/vendor/bootstrap-vue/src/components/form-radio/package.json +0 -162
  43. package/src/vendor/bootstrap-vue/src/components/form-select/README.md +0 -504
  44. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option-group.spec.js +0 -138
  45. package/src/vendor/bootstrap-vue/src/components/form-select/form-select-option.spec.js +0 -75
  46. package/src/vendor/bootstrap-vue/src/components/form-select/form-select.spec.js +0 -723
  47. package/src/vendor/bootstrap-vue/src/components/form-select/package.json +0 -132
  48. package/src/vendor/bootstrap-vue/src/components/form-textarea/README.md +0 -453
  49. package/src/vendor/bootstrap-vue/src/components/form-textarea/form-textarea.spec.js +0 -1000
  50. package/src/vendor/bootstrap-vue/src/components/form-textarea/package.json +0 -122
  51. package/src/vendor/bootstrap-vue/src/components/layout/README.md +0 -791
  52. package/src/vendor/bootstrap-vue/src/components/layout/col.spec.js +0 -192
  53. package/src/vendor/bootstrap-vue/src/components/layout/form-row.spec.js +0 -45
  54. package/src/vendor/bootstrap-vue/src/components/layout/package.json +0 -99
  55. package/src/vendor/bootstrap-vue/src/components/link/README.md +0 -76
  56. package/src/vendor/bootstrap-vue/src/components/link/link.spec.js +0 -434
  57. package/src/vendor/bootstrap-vue/src/components/link/package.json +0 -57
  58. package/src/vendor/bootstrap-vue/src/components/modal/MODIFICATIONS.md +0 -30
  59. package/src/vendor/bootstrap-vue/src/components/modal/README.md +0 -1067
  60. package/src/vendor/bootstrap-vue/src/components/modal/helpers/bv-modal-event.class.spec.js +0 -82
  61. package/src/vendor/bootstrap-vue/src/components/modal/modal.spec.js +0 -1418
  62. package/src/vendor/bootstrap-vue/src/components/modal/package.json +0 -544
  63. package/src/vendor/bootstrap-vue/src/components/nav/README.md +0 -362
  64. package/src/vendor/bootstrap-vue/src/components/nav/nav-item.spec.js +0 -127
  65. package/src/vendor/bootstrap-vue/src/components/nav/nav.spec.js +0 -177
  66. package/src/vendor/bootstrap-vue/src/components/nav/package.json +0 -73
  67. package/src/vendor/bootstrap-vue/src/components/popover/README.md +0 -919
  68. package/src/vendor/bootstrap-vue/src/components/popover/package.json +0 -261
  69. package/src/vendor/bootstrap-vue/src/components/popover/popover.spec.js +0 -198
  70. package/src/vendor/bootstrap-vue/src/components/table/README.md +0 -3157
  71. package/src/vendor/bootstrap-vue/src/components/table/helpers/default-sort-compare.spec.js +0 -112
  72. package/src/vendor/bootstrap-vue/src/components/table/helpers/normalize-fields.spec.js +0 -93
  73. package/src/vendor/bootstrap-vue/src/components/table/package.json +0 -1763
  74. package/src/vendor/bootstrap-vue/src/components/table/table-busy.spec.js +0 -150
  75. package/src/vendor/bootstrap-vue/src/components/table/table-caption.spec.js +0 -176
  76. package/src/vendor/bootstrap-vue/src/components/table/table-colgroup.spec.js +0 -81
  77. package/src/vendor/bootstrap-vue/src/components/table/table-filtering.spec.js +0 -409
  78. package/src/vendor/bootstrap-vue/src/components/table/table-item-formatter.spec.js +0 -56
  79. package/src/vendor/bootstrap-vue/src/components/table/table-lite.spec.js +0 -682
  80. package/src/vendor/bootstrap-vue/src/components/table/table-pagination.spec.js +0 -133
  81. package/src/vendor/bootstrap-vue/src/components/table/table-primarykey.spec.js +0 -83
  82. package/src/vendor/bootstrap-vue/src/components/table/table-provider.spec.js +0 -411
  83. package/src/vendor/bootstrap-vue/src/components/table/table-row-details.spec.js +0 -459
  84. package/src/vendor/bootstrap-vue/src/components/table/table-selectable.spec.js +0 -1182
  85. package/src/vendor/bootstrap-vue/src/components/table/table-simple.spec.js +0 -206
  86. package/src/vendor/bootstrap-vue/src/components/table/table-sorting.spec.js +0 -858
  87. package/src/vendor/bootstrap-vue/src/components/table/table-sticky-column.spec.js +0 -377
  88. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-bottom-row.spec.js +0 -94
  89. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-row-events.spec.js +0 -529
  90. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-top-row.spec.js +0 -88
  91. package/src/vendor/bootstrap-vue/src/components/table/table-tbody-transition.spec.js +0 -83
  92. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-custom.spec.js +0 -91
  93. package/src/vendor/bootstrap-vue/src/components/table/table-tfoot-events.spec.js +0 -137
  94. package/src/vendor/bootstrap-vue/src/components/table/table-thead-events.spec.js +0 -155
  95. package/src/vendor/bootstrap-vue/src/components/table/table-thead-top.spec.js +0 -96
  96. package/src/vendor/bootstrap-vue/src/components/table/table.spec.js +0 -692
  97. package/src/vendor/bootstrap-vue/src/components/tabs/README.md +0 -433
  98. package/src/vendor/bootstrap-vue/src/components/tabs/package.json +0 -205
  99. package/src/vendor/bootstrap-vue/src/components/tabs/tab.spec.js +0 -330
  100. package/src/vendor/bootstrap-vue/src/components/tabs/tabs.spec.js +0 -778
  101. package/src/vendor/bootstrap-vue/src/components/toast/README.md +0 -655
  102. package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.spec.js +0 -117
  103. package/src/vendor/bootstrap-vue/src/components/toast/package.json +0 -184
  104. package/src/vendor/bootstrap-vue/src/components/toast/toast.spec.js +0 -294
  105. package/src/vendor/bootstrap-vue/src/components/toast/toaster.spec.js +0 -77
  106. package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +0 -559
  107. package/src/vendor/bootstrap-vue/src/components/tooltip/package.json +0 -258
  108. package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.spec.js +0 -1240
  109. package/src/vendor/bootstrap-vue/src/components/transition/package.json +0 -5
  110. package/src/vendor/bootstrap-vue/src/components/transporter/package.json +0 -5
  111. package/src/vendor/bootstrap-vue/src/components/transporter/transporter.spec.js +0 -85
  112. package/src/vendor/bootstrap-vue/src/directives/modal/modal.spec.js +0 -191
  113. package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +0 -521
  114. package/src/vendor/bootstrap-vue/src/directives/tooltip/package.json +0 -131
  115. package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.spec.js +0 -190
  116. package/src/vendor/bootstrap-vue/src/directives/visible/README.md +0 -244
  117. package/src/vendor/bootstrap-vue/src/directives/visible/package.json +0 -24
  118. package/src/vendor/bootstrap-vue/src/mixins/attrs.spec.js +0 -194
  119. package/src/vendor/bootstrap-vue/src/mixins/click-out.spec.js +0 -52
  120. package/src/vendor/bootstrap-vue/src/mixins/focus-in.spec.js +0 -53
  121. package/src/vendor/bootstrap-vue/src/mixins/listen-on-document.spec.js +0 -117
  122. package/src/vendor/bootstrap-vue/src/mixins/listen-on-root.spec.js +0 -77
  123. package/src/vendor/bootstrap-vue/src/mixins/listen-on-window.spec.js +0 -115
  124. package/src/vendor/bootstrap-vue/src/mixins/listeners.spec.js +0 -245
  125. package/src/vendor/bootstrap-vue/src/utils/bv-event.class.spec.js +0 -66
  126. package/src/vendor/bootstrap-vue/src/utils/clone-deep.spec.js +0 -70
  127. package/src/vendor/bootstrap-vue/src/utils/config.spec.js +0 -169
  128. package/src/vendor/bootstrap-vue/src/utils/css-escape.spec.js +0 -82
  129. package/src/vendor/bootstrap-vue/src/utils/dom.spec.js +0 -291
  130. package/src/vendor/bootstrap-vue/src/utils/events.spec.js +0 -41
  131. package/src/vendor/bootstrap-vue/src/utils/get.spec.js +0 -109
  132. package/src/vendor/bootstrap-vue/src/utils/inspect.spec.js +0 -251
  133. package/src/vendor/bootstrap-vue/src/utils/loose-equal.spec.js +0 -203
  134. package/src/vendor/bootstrap-vue/src/utils/normalize-slot.spec.js +0 -63
  135. package/src/vendor/bootstrap-vue/src/utils/number.spec.js +0 -72
  136. package/src/vendor/bootstrap-vue/src/utils/object.spec.js +0 -61
  137. package/src/vendor/bootstrap-vue/src/utils/props.spec.js +0 -112
  138. package/src/vendor/bootstrap-vue/src/utils/router.spec.js +0 -248
  139. package/src/vendor/bootstrap-vue/src/utils/string.spec.js +0 -65
  140. package/src/vendor/bootstrap-vue/src/utils/stringify-object-values.spec.js +0 -47
  141. package/src/vendor/bootstrap-vue/src/utils/warn.spec.js +0 -54
@@ -1,172 +0,0 @@
1
- {
2
- "name": "@bootstrap-vue/form-checkbox",
3
- "version": "1.0.0",
4
- "meta": {
5
- "title": "Form Checkbox",
6
- "description": "Custom checkbox input and checkbox group to replace the browser default checkbox input, built on top of semantic and accessible markup. Optionally supports switch styling.",
7
- "components": [
8
- {
9
- "component": "BFormCheckboxGroup",
10
- "aliases": [
11
- "BCheckboxGroup",
12
- "BCheckGroup"
13
- ],
14
- "props": [
15
- {
16
- "prop": "ariaInvalid",
17
- "description": "Sets the 'aria-invalid' attribute value on the wrapper element. When not provided, the 'state' prop will control the attribute"
18
- },
19
- {
20
- "prop": "buttonVariant",
21
- "description": "Specifies the Bootstrap contextual color theme variant the apply to the button style checkboxes"
22
- },
23
- {
24
- "prop": "buttons",
25
- "description": "When set, renderes the checkboxes in this group with button styling"
26
- },
27
- {
28
- "prop": "checked",
29
- "description": "The current value of the checked checkboxes in the group. Must be an array when there are multiple checkboxes"
30
- },
31
- {
32
- "prop": "size",
33
- "description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
34
- },
35
- {
36
- "prop": "stacked",
37
- "description": "When set, renders the checkbox group in stacked mode"
38
- },
39
- {
40
- "prop": "switches",
41
- "description": "When set, renders the checkboxes in the group with switch styling"
42
- },
43
- {
44
- "prop": "validated",
45
- "description": "When set, adds the Bootstrap class 'was-validated' to the group wrapper"
46
- }
47
- ],
48
- "events": [
49
- {
50
- "event": "change",
51
- "description": "Emitted when selected value(s) is changed due to user interaction",
52
- "args": [
53
- {
54
- "arg": "checked",
55
- "type": "Array",
56
- "description": "Value of checkboxes. Value will be an array"
57
- }
58
- ]
59
- },
60
- {
61
- "event": "input",
62
- "description": "Emitted when the checked value is changed",
63
- "args": [
64
- {
65
- "arg": "checked",
66
- "type": "Array",
67
- "description": "Value of checkboxes. Value will be an array"
68
- }
69
- ]
70
- }
71
- ],
72
- "slots": [
73
- {
74
- "name": "default",
75
- "description": "Content (form checkboxes) to place in the form checkbox group"
76
- },
77
- {
78
- "name": "first",
79
- "description": "Slot to place b-form-checks so that they appear before checks generated from options prop"
80
- }
81
- ]
82
- },
83
- {
84
- "component": "BFormCheckbox",
85
- "aliases": [
86
- "BCheckbox",
87
- "BCheck"
88
- ],
89
- "props": [
90
- {
91
- "prop": "button",
92
- "description": "When set, renders the checkbox with the appearance of a button"
93
- },
94
- {
95
- "prop": "buttonVariant",
96
- "description": "Applies on of Bootstrap's theme colors when in 'button' mode"
97
- },
98
- {
99
- "prop": "checked",
100
- "description": "The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model"
101
- },
102
- {
103
- "prop": "indeterminate",
104
- "description": "Renders the checkbox in an indeterminate state. Syncable via the .sync modifier"
105
- },
106
- {
107
- "prop": "inline",
108
- "description": "When set, renders the checkbox as an inline element rather than as a 100% width block"
109
- },
110
- {
111
- "prop": "size",
112
- "description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
113
- },
114
- {
115
- "prop": "switch",
116
- "description": "When set, renders the checkbox with the appearance of a switch"
117
- },
118
- {
119
- "prop": "uncheckedValue",
120
- "description": "Value returned when this checkbox is unchecked. Note not applicable when multiple checkboxes bound to the same v-model array"
121
- },
122
- {
123
- "prop": "value",
124
- "description": "Value returned when this checkbox is checked"
125
- }
126
- ],
127
- "events": [
128
- {
129
- "event": "change",
130
- "description": "Emitted when selected value(s) is changed due to user interaction",
131
- "args": [
132
- {
133
- "arg": "checked",
134
- "type": [
135
- "Boolean",
136
- "String",
137
- "Number",
138
- "Object",
139
- "Array"
140
- ],
141
- "description": "Value of checkbox(es). When bound to multiple checkboxes, value will be an array"
142
- }
143
- ]
144
- },
145
- {
146
- "event": "input",
147
- "description": "Emitted when the selected value(s) is changed",
148
- "args": [
149
- {
150
- "arg": "checked",
151
- "type": [
152
- "Boolean",
153
- "String",
154
- "Number",
155
- "Object",
156
- "Array"
157
- ],
158
- "description": "Value of checkbox(es). When bound to multiple checkboxes, value will be an array"
159
- }
160
- ]
161
- }
162
- ],
163
- "slots": [
164
- {
165
- "name": "default",
166
- "description": "Content to place in the form checkbox"
167
- }
168
- ]
169
- }
170
- ]
171
- }
172
- }
@@ -1,339 +0,0 @@
1
- # Form Group
2
-
3
- > The `<b-form-group>` component is the easiest way to add some structure to forms. Its purpose is
4
- > to pair form controls with a legend or label, and to provide help text and invalid/valid feedback
5
- > text, as well as visual (color) contextual state feedback.
6
-
7
- ```html
8
- <template>
9
- <div>
10
- <b-form-group
11
- id="fieldset-1"
12
- description="Let us know your name."
13
- label="Enter your name"
14
- label-for="input-1"
15
- valid-feedback="Thank you!"
16
- :invalid-feedback="invalidFeedback"
17
- :state="state"
18
- >
19
- <b-form-input id="input-1" v-model="name" :state="state" trim></b-form-input>
20
- </b-form-group>
21
- </div>
22
- </template>
23
-
24
- <script>
25
- export default {
26
- computed: {
27
- state() {
28
- return this.name.length >= 4
29
- },
30
- invalidFeedback() {
31
- if (this.name.length > 0) {
32
- return 'Enter at least 4 characters.'
33
- }
34
- return 'Please enter something.'
35
- }
36
- },
37
- data() {
38
- return {
39
- name: ''
40
- }
41
- }
42
- }
43
- </script>
44
-
45
- <!-- b-form-group.vue -->
46
- ```
47
-
48
- ## Label
49
-
50
- Use the prop `label` to set the content of the generated `<legend>` or `<label>` element, or by
51
- using the named slot `label`, You may optionally visually hide the label text while still making it
52
- available to screen readers by setting the prop `label-sr-only`.
53
-
54
- `<b-form-group>` will render a `<fieldset>` with `<legend>` if the `label-for` prop is not set. If
55
- an input ID is provided to the `label-for` prop, then a `<div>` with `<label>` will be rendered.
56
-
57
- If you provide an input `id` value to the `label-for` prop (the `id` must exist on the input
58
- contained within the `<b-form-group>`), a `<label>` element will be rendered instead of a `<legend>`
59
- element, and will have the `for` attribute set to the `id` specified. When specifying the id, **do
60
- not** prepend it with `#`. The `label-for` prop should only be used when you have a single form
61
- input inside the `<b-form-group>` component. Do not set the `label-for` prop when using
62
- `<b-form-radio-group>`, `<b-form-checkbox-group>`, `<b-form-radio>`, `<b-form-checkbox>` or
63
- `<b-form-file>` components (or when placing multiple inputs in the same form group), as these inputs
64
- include integrated label element(s) and the `<legend>` element is more suitable.
65
-
66
- You can also apply additional classes to the label via the `label-class` prop, such as responsive
67
- padding and text alignment utility classes. The `label-class` prop accepts either a string or array
68
- of strings.
69
-
70
- ### Horizontal layout
71
-
72
- By default, the label appears above the input element(s), but you may optionally render horizontal
73
- (label to the left of the input) at the various standard Bootstrap breakpoints.
74
-
75
- The props `label-cols` and `label-cols-{breakpoint}` allow you to specify how many columns the label
76
- should occupy in the row. The input will fill the rest of the row width. The value must be a number
77
- greater than `0`. Or you can set the prop to `true` to make the label and input(s) each occupy half
78
- of the width of the rendered row (handy if you have custom Bootstrap with an odd number of columns),
79
- or set the value to `'auto'` so that the label occupies only the width that is needed.
80
-
81
- Since BootstrapVue `v2.21.0` it is also possible to specify how many columns the content should
82
- occupy in the row via the `content-cols` and `content-cols-{breakpoint}` props.
83
-
84
- When using both, the `label-cols` and `content-cols` props, make sure that the total amount of
85
- columns doesn't exceed `12`.
86
-
87
- See the [Layout and Grid System](?path=/docs/base-form-form-group--docs#how-it-works) docs for
88
- further information.
89
-
90
- | Prop | Description |
91
- | ----------------- | ------------------------------------------------------------------------------------- |
92
- | `label-cols` | Applies to breakpoint `xs` up |
93
- | `label-cols-sm` | Applies to breakpoint `sm` and up |
94
- | `label-cols-md` | Applies to breakpoint `md` and up |
95
- | `label-cols-lg` | Applies to breakpoint `lg` and up |
96
- | `label-cols-xl` | Applies to breakpoint `xl` and up |
97
- | `content-cols` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `xs` up |
98
- | `content-cols-sm` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `sm` and up |
99
- | `content-cols-md` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `md` and up |
100
- | `content-cols-lg` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `lg` and up |
101
- | `content-cols-xl` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `xl` and up |
102
-
103
- ```html
104
- <div>
105
- <div>
106
- <b-form-group
107
- id="fieldset-horizontal"
108
- label-cols-sm="4"
109
- label-cols-lg="3"
110
- content-cols-sm
111
- content-cols-lg="7"
112
- description="Let us know your name."
113
- label="Enter your name"
114
- label-for="input-horizontal"
115
- >
116
- <b-form-input id="input-horizontal"></b-form-input>
117
- </b-form-group>
118
- </div>
119
- </div>
120
-
121
- <!-- b-form-group-horizontal.vue -->
122
- ```
123
-
124
- The ability to set the label cols to `'auto'` was added in BootstrapVue version `v2.1.0`.
125
-
126
- ### Label size
127
-
128
- You can control the label text size match the size of your form input(s) via the optional
129
- `label-size` prop. Values can be `'sm'` or `'lg'` for small or large label, respectively. Sizes work
130
- for both horizontal and non-horizontal form groups.
131
-
132
- ```html
133
- <div>
134
- <b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Small" label-for="input-sm">
135
- <b-form-input id="input-sm" size="sm"></b-form-input>
136
- </b-form-group>
137
-
138
- <b-form-group label-cols="4" label-cols-lg="2" label="Default" label-for="input-default">
139
- <b-form-input id="input-default"></b-form-input>
140
- </b-form-group>
141
-
142
- <b-form-group label-cols="4" label-cols-lg="2" label-size="lg" label="Large" label-for="input-lg">
143
- <b-form-input id="input-lg" size="lg"></b-form-input>
144
- </b-form-group>
145
- </div>
146
-
147
- <!-- b-form-group-label-size.vue -->
148
- ```
149
-
150
- ### Label text alignment
151
-
152
- The label text may also optionally be aligned `left`, `center` or `right` by setting the respective
153
- value via the prop `label-text-align` and/or `label-align-{breakpoint}`.
154
-
155
- | Prop | Description |
156
- | ---------------- | --------------------------------- |
157
- | `label-align` | Applies to breakpoint `xs` up |
158
- | `label-align-sm` | Applies to breakpoint `sm` and up |
159
- | `label-align-md` | Applies to breakpoint `md` and up |
160
- | `label-align-lg` | Applies to breakpoint `lg` and up |
161
- | `label-align-xl` | Applies to breakpoint `xl` and up |
162
-
163
- Alignment has no effect if the `label-sr-only` prop is set.
164
-
165
- ## Description
166
-
167
- Optional descriptive text which is always shown with the `.text-muted` class by setting the
168
- `description` prop or using the named slot `description`. The description text is rendered using the
169
- [`<b-form-text>`](?path=/docs/base-form-form--docs#helper-components) form sub-component.
170
-
171
- ## Nested form groups
172
-
173
- Feel free to nest `<b-form-group>` components to produce advanced form layouts and semantic grouping
174
- of related form controls:
175
-
176
- ```html
177
- <div>
178
- <b-card bg-variant="light">
179
- <b-form-group
180
- label-cols-lg="3"
181
- label="Shipping Address"
182
- label-size="lg"
183
- label-class="font-weight-bold pt-0"
184
- class="mb-0"
185
- >
186
- <b-form-group
187
- label="Street:"
188
- label-for="nested-street"
189
- label-cols-sm="3"
190
- label-align-sm="right"
191
- >
192
- <b-form-input id="nested-street"></b-form-input>
193
- </b-form-group>
194
-
195
- <b-form-group
196
- label="City:"
197
- label-for="nested-city"
198
- label-cols-sm="3"
199
- label-align-sm="right"
200
- >
201
- <b-form-input id="nested-city"></b-form-input>
202
- </b-form-group>
203
-
204
- <b-form-group
205
- label="State:"
206
- label-for="nested-state"
207
- label-cols-sm="3"
208
- label-align-sm="right"
209
- >
210
- <b-form-input id="nested-state"></b-form-input>
211
- </b-form-group>
212
-
213
- <b-form-group
214
- label="Country:"
215
- label-for="nested-country"
216
- label-cols-sm="3"
217
- label-align-sm="right"
218
- >
219
- <b-form-input id="nested-country"></b-form-input>
220
- </b-form-group>
221
-
222
- <b-form-group
223
- label="Ship via:"
224
- label-cols-sm="3"
225
- label-align-sm="right"
226
- class="mb-0"
227
- v-slot="{ ariaDescribedby }"
228
- >
229
- <b-form-radio-group
230
- class="pt-2"
231
- :options="['Air', 'Courier', 'Mail']"
232
- :aria-describedby="ariaDescribedby"
233
- ></b-form-radio-group>
234
- </b-form-group>
235
- </b-form-group>
236
- </b-card>
237
- </div>
238
-
239
- <!-- b-form-group-nested.vue -->
240
- ```
241
-
242
- ## Disabled form group
243
-
244
- Setting the `disabled` prop will disable the rendered `<fieldset>` and, on most browsers, will
245
- disable all the input elements contained within the fieldset.
246
-
247
- `disabled` has no effect when `label-for` is set (as a `<fieldset>` element is not rendered).
248
-
249
- ## Validation state feedback
250
-
251
- Bootstrap includes validation styles for `valid` and `invalid` states on most form controls.
252
-
253
- Generally speaking, you'll want to use a particular state for specific types of feedback:
254
-
255
- - `false` (denotes invalid state) is great for when there's a blocking or required field. A user
256
- must fill in this field properly to submit the form.
257
- - `true` (denotes valid state) is ideal for situations when you have per-field validation throughout
258
- a form and want to encourage a user through the rest of the fields.
259
- - `null` Displays no validation state (neither valid nor invalid)
260
-
261
- To apply one of the contextual state icons on `<b-form-group>`, set the `state` prop to `false` (for
262
- invalid), `true` (for valid), or `null` (no validation state).
263
-
264
- Bootstrap v4 uses sibling CSS selectors of `:invalid` or `:valid` inputs to show the feedback text.
265
- Some form controls (such as checkboxes, radios, and file inputs, or inputs inside input-groups) are
266
- wrapped in additional markup that will no longer make the feedback text a sibling of the input, and
267
- hence the feedback will not show. In these situations you will need to set the validity `state` on
268
- the `<b-form-group>` _as well as_ the input.
269
-
270
- Feedback will be shown if the parent `<b-form>` component does _not_ have the `novalidate` prop set
271
- (or set to `false`) along with the `validated` prop set (and the input fails or passes native
272
- browser validation constraints such as `required`). Refer to Bootstrap v4's
273
- [Form component](https://getbootstrap.com/docs/4.5/components/forms/#validation) documentation for
274
- details on validation methods.
275
-
276
- You should always provide content via the `invalid-feedback` prop (or slot) to aid users using
277
- assistive technologies when setting a contextual `invalid` state.
278
-
279
- ### Invalid feedback
280
-
281
- Show optional invalid state feedback text to provide textual state feedback (html supported) by
282
- setting the prop `invalid-feedback` or using the named slot `invalid-feedback`.
283
-
284
- Invalid feedback is rendered using the
285
- [`<b-form-invalid-feedback>`](?path=/docs/base-form-form--docs#helper-components) form
286
- sub-component.
287
-
288
- ### Valid feedback
289
-
290
- Show optional valid state feedback text to provide textual state feedback (html supported) by
291
- setting the prop `valid-feedback` or using the named slot `valid-feedback`.
292
-
293
- Valid feedback is rendered using the
294
- [`<b-form-valid-feedback>`](?path=/docs/base-form-form--docs#helper-components) form sub-component.
295
-
296
- ### Feedback style
297
-
298
- By default, when visible, feedback (valid or invalid) will show as a block of text. You can change
299
- the feedback so that it shows as a static tooltip when visible, by setting the prop `tooltip` to
300
- `true`.
301
-
302
- ### Feedback limitations
303
-
304
- **Note:** When using `<b-input-group>`, `<b-form-file>`, `<b-form-radio-group>`, `<b-form-radio>`,
305
- `<b-form-checkbox-group>` or `<b-form-checkbox>` inside a `<b-form-group>`, setting an invalid (or
306
- valid) `state` on the `input` alone will **not** trigger the invalid (or valid) feedback to show
307
- (due to limitations with the new Bootstrap v4 validation CSS). To get around this, **you must also**
308
- set the invalid/valid `state` on `<b-form-group>`. Native browser validation will **not** trigger
309
- the invalid feedback to show when using one of the above mentioned form controls.
310
-
311
- ## Accessibility
312
-
313
- By default, when no `label-for` value is provided, `<b-form-group>` renders the input control(s)
314
- inside a an HTML `<fieldset>` element with the label content placed inside the fieldset's `<legend>`
315
- element. By nature of this markup, the legend content is automatically associated to the containing
316
- input control(s).
317
-
318
- It is **highly recommended** that you provide a unique `id` prop on your input element and set the
319
- `label-for` prop to this ID, when you have only a single input in the `<b-form-group>`.
320
-
321
- When multiple form controls are placed inside `<b-form-group>` (i.e. a series or radio or checkbox
322
- inputs, or a series of related inputs), **do not set** the `label-for` prop, as a label can only be
323
- associated with a single input. It is best to use the default rendered markup that produces a
324
- `<fieldset>` + `<legend>` which will describe the group of inputs.
325
-
326
- When placing multiple form controls inside a `<b-form-group>` (and you are not nesting
327
- `<b-form-group>` components), it is recommended to give each control its own associated `<label>`
328
- (which may be visually hidden using the `.sr-only` class) and set the labels `for` attribute to the
329
- `id` of the associated input control. Alternatively, you can set the `aria-label` attribute on each
330
- input control instead of using a `<label>`. For `<b-form-radio>` and `<b-form-checkbox>` (or the
331
- group versions), you do not need to set individual labels, as the rendered markup for these types of
332
- inputs already includes a `<label>` element.
333
-
334
- When the `<b-form-group>` has a `label-for` prop set, the `aria-describedby` attribute will be
335
- auto-assigned to the input. When the form group has multiple form controls, make sure to set the
336
- attribute to each control yourself by using the `ariaDescribedby` prop value from the optionally
337
- scoped `default` slot.
338
-
339
- <!-- Component reference added automatically from component package.json -->