Primer ViewComponents v0.36.1

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!-- With caption -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-04e38e91-9309-40e0-8090-7800e2d5276d caption-04e38e91-9309-40e0-8090-7800e2d5276d" class="FormControl-select FormControl-medium" name="my-select-list" id="my-select-list"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-04e38e91-9309-40e0-8090-7800e2d5276d" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
  <span class="FormControl-caption" id="caption-04e38e91-9309-40e0-8090-7800e2d5276d">With a caption</span>
</div>
<!-- Visually hidden label -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="sr-only FormControl-label" for="my-select-list">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-ce7497bf-648f-430e-a879-157bc7a181ba" class="FormControl-select FormControl-medium" name="my-select-list" id="my-select-list"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-ce7497bf-648f-430e-a879-157bc7a181ba" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Full width -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-ccc92484-a044-4a46-ac6c-3710e352f4e2" class="FormControl-select FormControl-medium" name="my-select-list" id="my-select-list"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-ccc92484-a044-4a46-ac6c-3710e352f4e2" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Not full width -->
<div class="FormControl">
  <label class="FormControl-label" for="my-select-list">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-95b5b5fa-6c45-4dae-9998-a86e98178f96" class="FormControl-select FormControl-medium" name="my-select-list" id="my-select-list"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-95b5b5fa-6c45-4dae-9998-a86e98178f96" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Disabled -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select disabled="disabled" aria-describedby="validation-ba7abc8b-bc5c-48ba-b7e9-fdcb7d084b17" class="FormControl-select FormControl-medium" name="my-select-list" id="my-select-list"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-ba7abc8b-bc5c-48ba-b7e9-fdcb7d084b17" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- Invalid -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select invalid="true" aria-invalid="true" aria-describedby="validation-de653433-363b-4708-a567-ec78290aadb3" class="FormControl-select FormControl-medium" name="my-select-list" id="my-select-list"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-de653433-363b-4708-a567-ec78290aadb3" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<!-- With validation message -->
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="my-select-list">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap">
    <select invalid="true" aria-invalid="true" aria-describedby="validation-abdfc5f0-c738-43f2-9111-7fdae07cde01" class="FormControl-select FormControl-medium" name="my-select-list" id="my-select-list"><option value="lopez">Lopez Island</option>
      <option value="shaw">Shaw Island</option>
      <option value="orcas">Orcas Island</option>
      <option value="san_juan">San Juan Island</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-abdfc5f0-c738-43f2-9111-7fdae07cde01">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span>An error occurred!</span>
  </div>
</div>
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
# With caption
render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Visually hidden label
render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Full width
render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Not full width
render(Primer::Alpha::Select.new(full_width: false, name: "my-select-list", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Disabled
render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# Invalid
render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end
# With validation message
render(Primer::Alpha::Select.new(validation_message: "An error occurred!", name: "my-select-list", label: "Favorite place to visit")) do |component|
  component.option(label: "Lopez Island", value: "lopez")
  component.option(label: "Shaw Island", value: "shaw")
  component.option(label: "Orcas Island", value: "orcas")
  component.option(label: "San Juan Island", value: "san_juan")
end

No notes provided.

No params configured.

No assets to display.