SearchApi Design System
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
<div class="flex flex-wrap items-center gap-2">
  <div class="min-w-0 flex-1">
    <div class="flex w-full min-w-0 items-stretch overflow-hidden border transition-colors focus-within:ring-3 rounded-md h-11 text-sm border-line-strong bg-surface hover:border-ink-faint focus-within:border-accent-line focus-within:ring-focus-ring" data-request-bar="true">
      <span class="relative flex shrink-0 items-center gap-1.5 px-3 after:absolute after:right-0 after:w-px after:bg-line after:content-[''] after:inset-y-2.5 font-mono text-sm font-bold text-method-get">GET</span>
      <span class="relative flex shrink-0 items-center gap-1.5 pl-3 font-mono text-ink-muted"
              aria-hidden="true">/api/v1/search?</span>
      <input type="text"
           value="engine=google&q=coffee&api_key=E5oa7LbhkKN7YUyj4CwXppK8"
           placeholder=""
           class="min-w-0 flex-1 border-0 bg-transparent px-0 placeholder:text-ink-faint focus:outline-none focus:ring-0 text-ink text-sm font-mono"
           spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="Request query string" data-endpoint-url="true" data-debounced-submit-target="address">
      <span class="relative flex shrink-0 items-center gap-1.5 px-3 after:absolute after:left-0 after:w-px after:bg-line after:content-[''] after:inset-y-2.5">
        <button type="button"
        class="inline-flex shrink-0 items-center gap-1.5 rounded-md text-sm text-ink-muted transition-colors hover:border-accent-line hover:text-ink border border-transparent px-1.5 py-1"
        data-controller="copy"
        data-action="copy#copy"
        data-copy-text-value="https://www.searchapi.io/api/v1/search?engine=google&q=coffee&api_key=E5oa7LbhkKN7YUyj4CwXppK8"
        aria-label="Copy request URL">
          <span class="inline-flex items-center gap-1.5" data-copy-target="idle">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0" aria-hidden="true">
              <path d="M9 3.75h9a1.5 1.5 0 0 1 1.5 1.5v9" /><path d="M6 8.25h9a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5H6a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 6 8.25Z" />
            </svg>
          </span>
          <span class="inline-flex items-center gap-1.5 text-ink" data-copy-target="done" role="status" hidden>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0" aria-hidden="true">
              <path d="M4.5 12.75 9 17.25l10.5-10.5" />
            </svg>
            <span>Copied</span>
          </span>
        </button>
      </span>
    </div>
  </div>
  <a class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors h-11 border border-line-faint bg-surface-sunk text-ink-faint cursor-not-allowed" aria-disabled="true" data-reset-control="true" data-reset-href="/google" data-live-class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors h-11 border border-line bg-surface-sunk text-ink hover:border-line-strong" data-idle-class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors h-11 border border-line-faint bg-surface-sunk text-ink-faint cursor-not-allowed">
    Reset
  </a>
  <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors h-11 border border-transparent bg-accent text-accent-ink hover:bg-accent-hover" data-turbo-frame="playground-run">
    Run
  </button>
  <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors h-11 border border-transparent bg-danger text-danger-ink hover:bg-danger-hover" formaction="/playground/google/live" formmethod="post" data-turbo-frame="playground-run">
    Run live
  </button>
</div>
1
render RequestBarComponent.new(state: playground_state(engine))

One control: the method inside the field behind a divider, the endpoint path without its scheme or host, the editable query, and copy as a suffix. The field is 44px against the buttons' 36 — the address is the request, and Reset and Run are things done to it.

Param Description Input

—