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
<!-- Small --><auto-complete src="/view-components/rails-app/auto_complete" for="list-id-1" data-view-component="true"> <div class="FormControl"> <label for="input-id-1" class="FormControl-label "> Select a fruit </label> <div class="FormControl-input-wrap FormControl-small FormControl-input-wrap--leadingVisual"> <span class="FormControl-input-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <input id="input-id-1" name="input-id-1" autocomplete="off" type="text" placeholder="Placeholder text" data-view-component="true" class="FormControl-input FormControl-small" /> </div> </div> <anchored-position anchor="input-id-1" side="outside-bottom" allow-out-of-bounds="" id="list-id-1" popover="" data-view-component="true" class="ActionListWrap ActionListWrap--inset Overlay Overlay--height-auto Overlay--width-auto overflow-y-auto"></anchored-position> <div id="list-id-1-feedback" class="sr-only"></div></auto-complete><!-- Medium --><auto-complete src="/view-components/rails-app/auto_complete" for="list-id-2" data-view-component="true"> <div class="FormControl"> <label for="input-id-2" class="FormControl-label "> Select a fruit </label> <div class="FormControl-input-wrap FormControl-medium FormControl-input-wrap--leadingVisual"> <span class="FormControl-input-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <input id="input-id-2" name="input-id-2" autocomplete="off" type="text" placeholder="Placeholder text" data-view-component="true" class="FormControl-input FormControl-medium" /> </div> </div> <anchored-position anchor="input-id-2" side="outside-bottom" allow-out-of-bounds="" id="list-id-2" popover="" data-view-component="true" class="ActionListWrap ActionListWrap--inset Overlay Overlay--height-auto Overlay--width-auto overflow-y-auto"></anchored-position> <div id="list-id-2-feedback" class="sr-only"></div></auto-complete><!-- Large --><auto-complete src="/view-components/rails-app/auto_complete" for="list-id-3" data-view-component="true"> <div class="FormControl"> <label for="input-id-3" class="FormControl-label "> Select a fruit </label> <div class="FormControl-input-wrap FormControl-large FormControl-input-wrap--leadingVisual"> <span class="FormControl-input-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <input id="input-id-3" name="input-id-3" autocomplete="off" type="text" placeholder="Placeholder text" data-view-component="true" class="FormControl-input FormControl-large" /> </div> </div> <anchored-position anchor="input-id-3" side="outside-bottom" allow-out-of-bounds="" id="list-id-3" popover="" data-view-component="true" class="ActionListWrap ActionListWrap--inset Overlay Overlay--height-auto Overlay--width-auto overflow-y-auto"></anchored-position> <div id="list-id-3-feedback" class="sr-only"></div></auto-complete>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Smallrender(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component| component.with_leading_visual_icon(icon: :search)end# Mediumrender(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component| component.with_leading_visual_icon(icon: :search)end# Largerender(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: UrlHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component| component.with_leading_visual_icon(icon: :search)end
No notes provided.
Param | Description | Input |
---|---|---|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
No assets to display.