300px
x
150px
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<div class="FormControl-spacingWrapper"> <div data-view-component="true"> <toggle-switch-input class="FormControl-toggleSwitchInput"> <span style="flex-grow: 1"> <span for="success-toggle" id="label-f7bab963-9544-4493-a849-459ab9148ce9" data-view-component="true" class="FormControl-label"> Good example </span> <div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-f7bab963-9544-4493-a849-459ab9148ce9" hidden="hidden" role="alert"> <span data-target="toggle-switch-input.validationMessageElement"></span> </div> </span> <toggle-switch id="success-toggle" src="/view-components/rails-app/toggle_switch" data-csrf="95EzjM1JD69NVIuHsdh3y-tRJbbY_7AizbzqfgDUkVnc_VL2wsmdpPI1g1ksAo08Bwaelz43_aaipTVl8_kLvw" data-view-component="true" class="ToggleSwitch"> <span class="ToggleSwitch-statusIcon"> <svg hidden="hidden" data-target="toggle-switch.errorIcon" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert-fill color-fg-danger"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"></path> </svg> <span hidden="hidden" data-target="toggle-switch.loadingSpinner" data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </span> <span aria-hidden="true" data-view-component="true" class="ToggleSwitch-status"> <div data-view-component="true" class="ToggleSwitch-statusOn">On</div> <div data-view-component="true" class="ToggleSwitch-statusOff">Off</div> </span> <button data-target="toggle-switch.switch" data-action="click:toggle-switch#toggle" aria-describedby="validation-f7bab963-9544-4493-a849-459ab9148ce9 caption-f7bab963-9544-4493-a849-459ab9148ce9" aria-labelledby="label-f7bab963-9544-4493-a849-459ab9148ce9" aria-pressed="false" data-view-component="true" class="ToggleSwitch-track"> <div aria-hidden="true" data-view-component="true" class="ToggleSwitch-icons"> <div data-view-component="true" class="ToggleSwitch-lineIcon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true"> <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" /> </svg></div> <div data-view-component="true" class="ToggleSwitch-circleIcon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true"> <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" /> </svg></div> </div> <div data-view-component="true" class="ToggleSwitch-knob"></div> </button></toggle-switch> </toggle-switch-input> <div> <span class="FormControl-caption" id="caption-f7bab963-9544-4493-a849-459ab9148ce9"> My <em>favorite</em> caption lorem ipsum dolor sit amet. </span> </div> </div></div><hr><div class="FormControl-spacingWrapper"> <div data-view-component="true"> <toggle-switch-input class="FormControl-toggleSwitchInput"> <span style="flex-grow: 1"> <span for="error-toggle" id="label-98495a97-1d0f-434e-b46e-edb373e24516" data-view-component="true" class="FormControl-label"> Bad example </span> <div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-98495a97-1d0f-434e-b46e-edb373e24516" hidden="hidden" role="alert"> <span data-target="toggle-switch-input.validationMessageElement"></span> </div> </span> <toggle-switch id="error-toggle" src="/view-components/rails-app/toggle_switch?fail=true" data-csrf="Rh_YdnAbfnh53M9ZTwhB2pg-hHEeOzFDwCDhF1IakBltc7kMf5vsc8a9x4fS0rstdGk_UPjzfMevOT4MoTcK_w" data-view-component="true" class="ToggleSwitch"> <span class="ToggleSwitch-statusIcon"> <svg hidden="hidden" data-target="toggle-switch.errorIcon" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert-fill color-fg-danger"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"></path> </svg> <span hidden="hidden" data-target="toggle-switch.loadingSpinner" data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </span> <span aria-hidden="true" data-view-component="true" class="ToggleSwitch-status"> <div data-view-component="true" class="ToggleSwitch-statusOn">On</div> <div data-view-component="true" class="ToggleSwitch-statusOff">Off</div> </span> <button data-target="toggle-switch.switch" data-action="click:toggle-switch#toggle" aria-describedby="validation-98495a97-1d0f-434e-b46e-edb373e24516 caption-98495a97-1d0f-434e-b46e-edb373e24516" aria-labelledby="label-98495a97-1d0f-434e-b46e-edb373e24516" aria-pressed="false" data-view-component="true" class="ToggleSwitch-track"> <div aria-hidden="true" data-view-component="true" class="ToggleSwitch-icons"> <div data-view-component="true" class="ToggleSwitch-lineIcon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true"> <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" /> </svg></div> <div data-view-component="true" class="ToggleSwitch-circleIcon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true"> <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" /> </svg></div> </div> <div data-view-component="true" class="ToggleSwitch-knob"></div> </button></toggle-switch> </toggle-switch-input> <div> <span class="FormControl-caption" id="caption-98495a97-1d0f-434e-b46e-edb373e24516"> My <em>favorite</em> caption lorem ipsum dolor sit amet. </span> </div> </div></div>1
2
3
<%= render(ExampleToggleSwitchForm.new(label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %><hr><%= render(ExampleToggleSwitchForm.new(label: "Bad example", src: toggle_switch_index_path(fail: true), id: "error-toggle")) %>No notes provided.
No params configured.
app/forms/example_toggle_switch_form.rb
1
2
3
4
5
6
7
8
# frozen_string_literal: true# :nodoc:class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm def initialize(**system_arguments) super(name: :example_field, label: "Example", **system_arguments) endendapp/forms/example_toggle_switch_form/example_field_caption.html.erb
1
My <em>favorite</em> caption lorem ipsum dolor sit amet.