41 41
```html
42 42
<template>
43 43
<div>
44 -
<b-form-group label="Using options array:">
44 +
<b-form-group label="Using options array:" v-slot="{ ariaDescribedby }">
45 45
<b-form-checkbox-group
46 46
id="checkbox-group-1"
47 47
v-model="selected"
48 48
:options="options"
49 +
:aria-describedby="ariaDescribedby"
49 50
name="flavour-1"
50 51
></b-form-checkbox-group>
51 52
</b-form-group>
52 53 53 -
<b-form-group label="Using sub-components:">
54 -
<b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
54 +
<b-form-group label="Using sub-components:" v-slot="{ ariaDescribedby }">
55 +
<b-form-checkbox-group
56 +
id="checkbox-group-2"
57 +
v-model="selected"
58 +
:aria-describedby="ariaDescribedby"
59 +
name="flavour-2"
60 +
>
55 61
<b-form-checkbox value="orange">Orange</b-form-checkbox>
56 62
<b-form-checkbox value="apple">Apple</b-form-checkbox>
57 63
<b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
@@ -220,41 +226,57 @@ or if using individual checkboxes not inside a `<b-form-checkbox-group>`, set th
220 226
```html
221 227
<template>
222 228
<div>
223 -
<b-form-group label="Form-checkbox-group inline checkboxes (default)">
229 +
<b-form-group
230 +
label="Form-checkbox-group inline checkboxes (default)"
231 +
v-slot="{ ariaDescribedby }"
232 +
>
224 233
<b-form-checkbox-group
225 234
v-model="selected"
226 235
:options="options"
236 +
:aria-describedby="ariaDescribedby"
227 237
name="flavour-1a"
228 238
></b-form-checkbox-group>
229 239
</b-form-group>
230 240 231 -
<b-form-group label="Form-checkbox-group stacked checkboxes">
241 +
<b-form-group
242 +
label="Form-checkbox-group stacked checkboxes"
243 +
v-slot="{ ariaDescribedby }"
244 +
>
232 245
<b-form-checkbox-group
233 246
v-model="selected"
234 247
:options="options"
248 +
:aria-describedby="ariaDescribedby"
235 249
name="flavour-2a"
236 250
stacked
237 251
></b-form-checkbox-group>
238 252
</b-form-group>
239 253 240 -
<b-form-group label="Individual stacked checkboxes (default)">
254 +
<b-form-group
255 +
label="Individual stacked checkboxes (default)"
256 +
v-slot="{ ariaDescribedby }"
257 +
>
241 258
<b-form-checkbox
242 259
v-for="option in options"
243 260
v-model="selected"
244 261
:key="option.value"
245 262
:value="option.value"
263 +
:aria-describedby="ariaDescribedby"
246 264
name="flavour-3a"
247 265
>
248 266
{{ option.text }}
249 267
</b-form-checkbox>
250 268
</b-form-group>
251 269 252 -
<b-form-group label="Individual inline checkboxes">
270 +
<b-form-group
271 +
label="Individual inline checkboxes"
272 +
v-slot="{ ariaDescribedby }"
273 +
>
253 274
<b-form-checkbox
254 275
v-for="option in options"
255 276
v-model="selected"
256 277
:key="option.value"
257 278
:value="option.value"
279 +
:aria-describedby="ariaDescribedby"
258 280
name="flavour-4a"
259 281
inline
260 282
>
@@ -395,30 +417,42 @@ variants). The default `button-variant` is `secondary`.
395 417
```html
396 418
<template>
397 419
<div>
398 -
<b-form-group label="Button-group style checkboxes">
420 +
<b-form-group
421 +
label="Button-group style checkboxes"
422 +
v-slot="{ ariaDescribedby }"
423 +
>
399 424
<b-form-checkbox-group
400 425
v-model="selected"
401 426
:options="options"
427 +
:aria-describedby="ariaDescribedby"
402 428
name="buttons-1"
403 429
buttons
404 430
></b-form-checkbox-group>
405 431
</b-form-group>
406 432 407 -
<b-form-group label="Button-group style checkboxes with variant primary and large buttons">
433 +
<b-form-group
434 +
label="Button-group style checkboxes with variant primary and large buttons"
435 +
v-slot="{ ariaDescribedby }"
436 +
>
408 437
<b-form-checkbox-group
409 438
v-model="selected"
410 439
:options="options"
440 +
:aria-describedby="ariaDescribedby"
411 441
buttons
412 442
button-variant="primary"
413 443
size="lg"
414 444
name="buttons-2"
415 445
></b-form-checkbox-group>
416 446
</b-form-group>
417 447 418 -
<b-form-group label="Stacked (vertical) button-group style checkboxes">
448 +
<b-form-group
449 +
label="Stacked (vertical) button-group style checkboxes"
450 +
v-slot="{ ariaDescribedby }"
451 +
>
419 452
<b-form-checkbox-group
420 453
v-model="selected"
421 454
:options="options"
455 +
:aria-describedby="ariaDescribedby"
422 456
stacked
423 457
buttons
424 458
></b-form-checkbox-group>
@@ -486,18 +520,26 @@ Render groups of checkboxes with the look of a switches by setting the prop `swi
486 520
```html
487 521
<template>
488 522
<div>
489 -
<b-form-group label="Inline switch style checkboxes">
523 +
<b-form-group
524 +
label="Inline switch style checkboxes"
525 +
v-slot="{ ariaDescribedby }"
526 +
>
490 527
<b-form-checkbox-group
491 528
v-model="selected"
492 529
:options="options"
530 +
:aria-describedby="ariaDescribedby"
493 531
switches
494 532
></b-form-checkbox-group>
495 533
</b-form-group>
496 534 497 -
<b-form-group label="Stacked (vertical) switch style checkboxes">
535 +
<b-form-group
536 +
label="Stacked (vertical) switch style checkboxes"
537 +
v-slot="{ ariaDescribedby }"
538 +
>
498 539
<b-form-checkbox-group
499 540
v-model="selected"
500 541
:options="options"
542 +
:aria-describedby="ariaDescribedby"
501 543
switches
502 544
stacked
503 545
></b-form-checkbox-group>
@@ -553,18 +595,20 @@ by setting the `plain` prop.
553 595
```html
554 596
<template>
555 597
<div>
556 -
<b-form-group label="Plain inline checkboxes">
598 +
<b-form-group label="Plain inline checkboxes" v-slot="{ ariaDescribedby }">
557 599
<b-form-checkbox-group
558 600
v-model="selected"
559 601
:options="options"
602 +
:aria-describedby="ariaDescribedby"
560 603
plain
561 604
></b-form-checkbox-group>
562 605
</b-form-group>
563 606 564 -
<b-form-group label="Plain stacked checkboxes">
607 +
<b-form-group label="Plain stacked checkboxes" v-slot="{ ariaDescribedby }">
565 608
<b-form-checkbox-group
566 609
v-model="selected"
567 610
:options="options"
611 +
:aria-describedby="ariaDescribedby"
568 612
plain
569 613
stacked
570 614
></b-form-checkbox-group>
@@ -747,22 +791,25 @@ modifier.
747 791
</b-form-checkbox>
748 792
</template>
749 793 750 -
<b-form-checkbox-group
751 -
id="flavors"
752 -
v-model="selected"
753 -
:options="flavours"
754 -
name="flavors"
755 -
class="ml-4"
756 -
aria-label="Individual flavours"
757 -
stacked
758 -
></b-form-checkbox-group>
759 -
</b-form-group>
760 - 761 -
<div>
762 -
Selected: <strong>{{ selected }}</strong><br>
763 -
All Selected: <strong>{{ allSelected }}</strong><br>
764 -
Indeterminate: <strong>{{ indeterminate }}</strong>
765 -
</div>
794 +
<template v-slot="{ ariaDescribedby }">
795 +
<b-form-checkbox-group
796 +
id="flavors"
797 +
v-model="selected"
798 +
:options="flavours"
799 +
:aria-describedby="ariaDescribedby"
800 +
name="flavors"
801 +
class="ml-4"
802 +
aria-label="Individual flavours"
803 +
stacked
804 +
></b-form-checkbox-group>
805 +
</b-form-group>
806 + 807 +
<div>
808 +
Selected: <strong>{{ selected }}</strong><br>
809 +
All Selected: <strong>{{ allSelected }}</strong><br>
810 +
Indeterminate: <strong>{{ indeterminate }}</strong>
811 +
</div>
812 +
</template>
766 813
</div>
767 814
</template>
768 815 RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4