Primer ViewComponents v0.34.0

Previews

No matching results.

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="caption-fd83c03f-4cb3-474b-bc85-4b9d2de3bd43" 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-fd83c03f-4cb3-474b-bc85-4b9d2de3bd43">With a caption</span>
  </span>
</div>
<!-- Checked -->
<div class="FormControl-checkbox-wrap">
  <input name="my-check-box1" type="hidden" value="0" autocomplete="off" /><input 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 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" 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 caption
render(Primer::Alpha::CheckBox.new(caption: "With a caption", name: "my-check-box1", label: "Jean-Luc Picard"))
# Checked
render(Primer::Alpha::CheckBox.new(checked: true, name: "my-check-box1", label: "Jean-Luc Picard"))
# Visually hidden label
render(Primer::Alpha::CheckBox.new(visually_hide_label: true, name: "my-check-box2", label: "Jean-Luc Picard"))
# Disabled
render(Primer::Alpha::CheckBox.new(disabled: true, name: "my-check-box4", label: "Jean-Luc Picard"))

No notes provided.

No params configured.

No assets to display.