OpenProject Lookbook

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-1">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap FormControl-input-width--auto">
    <select aria-describedby="validation-d4f424c8-2e20-4aa4-8b75-4e5e1ddfea38 caption-d4f424c8-2e20-4aa4-8b75-4e5e1ddfea38" class="FormControl-select FormControl-medium" name="my-select-list-1" id="my-select-list-1"><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-d4f424c8-2e20-4aa4-8b75-4e5e1ddfea38" 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-d4f424c8-2e20-4aa4-8b75-4e5e1ddfea38">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-2">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap FormControl-input-width--auto">
    <select aria-describedby="validation-0c8864f2-5553-4462-82b5-c203ec03111d" class="FormControl-select FormControl-medium" name="my-select-list-2" id="my-select-list-2"><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-0c8864f2-5553-4462-82b5-c203ec03111d" 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-3">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap FormControl-input-width--auto">
    <select aria-describedby="validation-0307d4b5-885e-453b-9b9c-834fe7ac9926" class="FormControl-select FormControl-medium" name="my-select-list-3" id="my-select-list-3"><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-0307d4b5-885e-453b-9b9c-834fe7ac9926" 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-4">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap FormControl-input-width--auto">
    <select aria-describedby="validation-8d98f06c-05bd-4aa4-bb95-5e2bae7ec0bd" class="FormControl-select FormControl-medium" name="my-select-list-4" id="my-select-list-4"><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-8d98f06c-05bd-4aa4-bb95-5e2bae7ec0bd" 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-5">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap FormControl-input-width--auto">
    <select disabled="disabled" aria-describedby="validation-7953564e-351f-4d6f-ba8a-2595ff6b010d" class="FormControl-select FormControl-medium" name="my-select-list-5" id="my-select-list-5"><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-7953564e-351f-4d6f-ba8a-2595ff6b010d" 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-6">
    Favorite place to visit
  </label>
  <div class="FormControl-select-wrap FormControl-input-width--auto">
    <select invalid="true" aria-invalid="true" aria-describedby="validation-d5bdf452-9ee6-4777-987c-b01f2bcab4ce" class="FormControl-select FormControl-medium" name="my-select-list-6" id="my-select-list-6"><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-d5bdf452-9ee6-4777-987c-b01f2bcab4ce" 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 FormControl-input-width--auto">
    <select invalid="true" aria-invalid="true" aria-describedby="validation-ed593951-77ef-419d-81c3-7d7e2920ea08" 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-ed593951-77ef-419d-81c3-7d7e2920ea08">
    <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>

No notes provided.

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-1", 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-2", 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-3", 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-4", 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-5", 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-6", 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 params configured.