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
<div class="d-flex flex-items-start flex-column flex-sm-row flex-sm-items-end" style="gap: .5rem">
  <auto-complete src="/view-components/rails-app/auto_complete" for="list-id" data-view-component="true">
    <div class="FormControl FormControl--fullWidth">
      <label for="input-id" 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" name="input-id" autocomplete="off" type="text" placeholder="Placeholder text" data-view-component="true" class="FormControl-input FormControl-medium" />
      </div>
    </div>
    <anchored-position anchor="input-id" side="outside-bottom" allow-out-of-bounds="" id="list-id" 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-feedback" class="sr-only"></div>
  </auto-complete>  <button type="button" data-view-component="true" class="Button--primary Button--medium Button">  <span class="Button-content">
      <span class="Button-label">Submit</span>
    </span>
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="d-flex flex-items-start flex-column flex-sm-row flex-sm-items-end" style="gap: .5rem">
  <%= render(
    Primer::Beta::AutoComplete.new(
      label_text: label_text,
      input_id: input_id,
      list_id: list_id,
      src: autocomplete_index_path,
      show_clear_button: show_clear_button,
      visually_hide_label: visually_hide_label,
      placeholder: placeholder,
      size: size,
      full_width: full_width,
      disabled: disabled,
      invalid: invalid,
      input_name: input_name
  )) do |component| %>
    <% component.with_leading_visual_icon(icon: :search) %>
  <% end %>
  <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Submit" } %>
</div>

No notes provided.

Param Description Input

—

—

—

—

—

—

—

—

—

—

—

—

No assets to display.