x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- With caption --><div class="FormControl-checkbox-wrap"> <input name="my-check-box1" type="hidden" value="0" autocomplete="off" /><input aria-describedby="validation-87031c9c-8135-44f1-9516-40acd7ed02d4 caption-87031c9c-8135-44f1-9516-40acd7ed02d4" class="FormControl-checkbox" type="checkbox" value="1" name="my-check-box1" id="my-check-box1" /> <span class="FormControl-checkbox-labelWrap"> <label class="FormControl-label" for="my-check-box1"> Jean-Luc Picard </label> <span class="FormControl-caption" id="caption-87031c9c-8135-44f1-9516-40acd7ed02d4">With a caption</span> </span></div><!-- Checked --><div class="FormControl-checkbox-wrap"> <input name="my-check-box1" type="hidden" value="0" autocomplete="off" /><input aria-describedby="validation-6c8937e2-6cd7-44dd-8ea7-c5587e1f6eef" class="FormControl-checkbox" type="checkbox" value="1" checked="checked" name="my-check-box1" id="my-check-box1" /> <span class="FormControl-checkbox-labelWrap"> <label class="FormControl-label" for="my-check-box1"> Jean-Luc Picard </label> </span></div><!-- Visually hidden label --><div class="FormControl-checkbox-wrap"> <input name="my-check-box2" type="hidden" value="0" autocomplete="off" /><input aria-describedby="validation-404cde88-6894-4274-a32a-25249693bf92" class="FormControl-checkbox" type="checkbox" value="1" name="my-check-box2" id="my-check-box2" /> <span class="FormControl-checkbox-labelWrap"> <label class="sr-only FormControl-label" for="my-check-box2"> Jean-Luc Picard </label> </span></div><!-- Disabled --><div class="FormControl-checkbox-wrap"> <input name="my-check-box4" disabled="disabled" type="hidden" value="0" autocomplete="off" /><input disabled="disabled" aria-describedby="validation-24695b4b-8e37-4e70-b036-a3a047d6a1b1" class="FormControl-checkbox" type="checkbox" value="1" name="my-check-box4" id="my-check-box4" /> <span class="FormControl-checkbox-labelWrap"> <label class="FormControl-label" for="my-check-box4"> Jean-Luc Picard </label> </span></div>
1
2
3
4
5
6
7
8
9
10
11
# With captionrender(Primer::Alpha::CheckBox.new(caption: "With a caption", name: "my-check-box1", label: "Jean-Luc Picard"))# Checkedrender(Primer::Alpha::CheckBox.new(checked: true, name: "my-check-box1", label: "Jean-Luc Picard"))# Visually hidden labelrender(Primer::Alpha::CheckBox.new(visually_hide_label: true, name: "my-check-box2", label: "Jean-Luc Picard"))# Disabledrender(Primer::Alpha::CheckBox.new(disabled: true, name: "my-check-box4", label: "Jean-Luc Picard"))
No notes provided.
No params configured.
No assets to display.