Primer ViewComponents v0.15.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-radio-wrap">
  <input aria-describedby="validation-cd314206-5eed-4c31-83b2-d036c50136d1 caption-cd314206-5eed-4c31-83b2-d036c50136d1" class="FormControl-radio" type="radio" value="bsg1" name="my-radio-button" id="my-radio-button_bsg1" />
  <span class="FormControl-radio-labelWrap">
    <label class="FormControl-label" for="my-radio-button_bsg1">
      Battlestar Galactica
    </label>        <span class="FormControl-caption" id="caption-cd314206-5eed-4c31-83b2-d036c50136d1">With a caption</span>
  </span>
</div>
<!-- Checked -->
<div class="FormControl-radio-wrap">
  <input aria-describedby="validation-74324c7c-9267-42e7-ae7a-09ed00df702a" class="FormControl-radio" type="radio" value="bsg2" checked="checked" name="my-radio-button" id="my-radio-button_bsg2" />
  <span class="FormControl-radio-labelWrap">
    <label class="FormControl-label" for="my-radio-button_bsg2">
      Battlestar Galactica
    </label>
  </span>
</div>
<!-- Visually hidden label -->
<div class="FormControl-radio-wrap">
  <input aria-describedby="validation-cc6139db-ffc2-4b06-9b81-859b0b447a7c" class="FormControl-radio" type="radio" value="bsg2" name="my-radio-button" id="my-radio-button_bsg2" />
  <span class="FormControl-radio-labelWrap">
    <label class="sr-only FormControl-label" for="my-radio-button_bsg2">
      Battlestar Galactica
    </label>
  </span>
</div>
<!-- Disabled -->
<div class="FormControl-radio-wrap">
  <input disabled="disabled" aria-describedby="validation-9c5e4b73-25a5-47bb-aea1-73673aa7b400" class="FormControl-radio" type="radio" value="bsg4" name="my-radio-button" id="my-radio-button_bsg4" />
  <span class="FormControl-radio-labelWrap">
    <label class="FormControl-label" for="my-radio-button_bsg4">
      Battlestar Galactica
    </label>
  </span>
</div>
1
2
3
4
5
6
7
8
9
10
11
# With caption
render(Primer::Alpha::RadioButton.new(caption: "With a caption", name: "my-radio-button", label: "Battlestar Galactica", value: "bsg1"))
# Checked
render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true))
# Visually hidden label
render(Primer::Alpha::RadioButton.new(visually_hide_label: true, name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2"))
# Disabled
render(Primer::Alpha::RadioButton.new(disabled: true, name: "my-radio-button", label: "Battlestar Galactica", value: "bsg4"))

No notes provided.

No params configured.

No assets to display.