Open demo

CSS code

HTML 
<div><span class="lbl">Department select</span>
<form class="ss" role="search" aria-label="Shop">
  <label class="sr-only" for="ss-dept">Department</label>
  <label class="sr-only" for="ss-shop">Search Harbor & Pine</label>
  <div class="ss-group">
    <select class="ss-select" id="ss-dept" name="dept">
      <option value="">All</option><option>Books</option><option>Kitchen</option><option>Garden</option><option>Outdoor</option>
    </select>
    <input class="ss-input" id="ss-shop" type="search" name="q" placeholder="Search Harbor & Pine">
    <button class="ss-btn" type="submit" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
  </div>
</form></div>

<div><span class="lbl">Scope radios above the field</span>
<form class="ss" role="search" aria-label="Documentation">
  <fieldset class="ss-scopes">
    <legend class="sr-only">Search in</legend>
    <label class="ss-chip"><input type="radio" name="in" value="all" checked><span>Everything</span></label>
    <label class="ss-chip"><input type="radio" name="in" value="guides"><span>Guides</span></label>
    <label class="ss-chip"><input type="radio" name="in" value="api"><span>API reference</span></label>
    <label class="ss-chip"><input type="radio" name="in" value="forum"><span>Community</span></label>
  </fieldset>
  <div class="ss-field">
    <label class="sr-only" for="ss-docs">Search the documentation</label>
    <svg class="ss-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="ss-input" id="ss-docs" type="search" name="q" placeholder="webhooks, rate limits…">
    <button class="ss-btn" type="submit">Search</button>
  </div>
</form></div>

<div><span class="lbl">What and where</span>
<form class="ss ss-duo" role="search" aria-label="Jobs">
  <label class="ss-seg">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <span class="ss-cap">Role or skill</span>
    <input type="search" name="q" placeholder="Product designer">
  </label>
  <label class="ss-seg">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z"/><circle cx="12" cy="9.5" r="2.5"/></svg>
    <span class="ss-cap">Location</span>
    <input type="text" name="where" placeholder="City or “remote”" autocomplete="address-level2">
  </label>
  <button class="ss-btn" type="submit">Find jobs</button>
</form></div>
CSS 
/* Scoped search: the query plus something that narrows it — a department <select>, scope radios, or a second field.
   Every control is native and labelled, so the form submits the scope with the query. */
.ss{--ss-ink:#1c1917;--ss-text:#44403c;--ss-muted:#6b6560;--ss-line:#857d75;--ss-soft:#f5f2ee;--ss-accent:#c2410c;--ss-accent-dark:#9a3412;
  --ss-ring:rgba(194,65,12,.22);max-width:640px;color:var(--ss-ink)}
.ss *{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;margin:0;padding:0 20px;border:0;border-radius:12px;
  background:var(--ss-accent);color:#fff;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .15s}
.ss-btn:hover{background:var(--ss-accent-dark)}
.ss-btn:focus-visible{outline:2px solid var(--ss-accent);outline-offset:2px}
.ss-btn svg{width:20px;height:20px}
/* A: department select, field and an icon button joined into one bar */
.ss-group{display:flex;height:50px}
.ss-select{flex:none;height:100%;margin:0;padding:0 34px 0 14px;font:inherit;font-size:.9rem;font-weight:600;color:var(--ss-text);cursor:pointer;
  background:var(--ss-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2344403c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center/14px;
  border:1px solid var(--ss-line);border-right:0;border-radius:12px 0 0 12px;-webkit-appearance:none;appearance:none}
.ss-input{flex:1;width:100%;min-width:0;height:100%;margin:0;padding:0 16px;font:inherit;font-size:1rem;color:inherit;background:#fff;
  border:1px solid var(--ss-line);border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.ss-input::placeholder{color:var(--ss-muted);opacity:1}
.ss-group .ss-select:focus-visible,.ss-group .ss-input:focus{position:relative;z-index:1}
.ss-group .ss-btn{width:58px;padding:0;border-radius:0 12px 12px 0}
.ss-select:focus-visible,.ss-input:focus{outline:none;border-color:var(--ss-accent);box-shadow:0 0 0 1px var(--ss-accent),0 0 0 4px var(--ss-ring)}
/* B: scope radios above the field */
.ss-scopes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;border:0}
.ss-chip{position:relative}
.ss-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ss-chip span{display:block;padding:6px 14px;border:1px solid var(--ss-line);border-radius:999px;background:#fff;color:var(--ss-text);
  font-size:.86rem;font-weight:500;transition:background-color .15s,color .15s,border-color .15s}
.ss-chip:hover span{border-color:var(--ss-ink)}
.ss-chip input:checked+span{background:var(--ss-ink);border-color:var(--ss-ink);color:#fff}
.ss-chip input:focus-visible+span{outline:2px solid var(--ss-accent);outline-offset:2px}
.ss-field{position:relative}
.ss-field .ss-ico{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--ss-muted);pointer-events:none}
.ss-field .ss-input{height:52px;padding:0 128px 0 46px;border-radius:12px}
.ss-field .ss-btn{position:absolute;right:6px;top:6px;height:40px;border-radius:9px;background:var(--ss-ink)}
.ss-field .ss-btn:hover{background:#44403c}
/* C: two labelled fields in one bar — what and where */
.ss-duo{display:flex;gap:6px;padding:6px;background:#fff;border:1px solid var(--ss-line);border-radius:16px;box-shadow:0 12px 30px rgba(28,25,23,.08)}
.ss-seg{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:8px 14px 8px 46px;border-radius:11px;cursor:text;
  transition:background-color .15s,box-shadow .15s}
.ss-seg+.ss-seg::before{content:"";position:absolute;left:-4px;top:14px;bottom:14px;width:1px;background:#d6d3d1}
.ss-seg:hover{background:var(--ss-soft)}
.ss-seg:focus-within{background:#fff7ed;box-shadow:inset 0 0 0 2px var(--ss-accent)}
.ss-seg svg{position:absolute;left:15px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--ss-accent)}
.ss-cap{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ss-text)}
.ss-seg input{width:100%;min-width:0;margin:0;padding:0;font:inherit;font-size:.98rem;color:inherit;background:transparent;border:0;outline:none;
  -webkit-appearance:none;appearance:none}
.ss-seg input::placeholder{color:var(--ss-muted);opacity:1}
.ss-duo .ss-btn{padding:0 26px}
@media (max-width:600px){
  .ss-duo{flex-direction:column}
  .ss-seg{padding-top:10px;padding-bottom:10px}
  .ss-seg+.ss-seg::before{left:14px;right:14px;top:-4px;bottom:auto;width:auto;height:1px}
  .ss-duo .ss-btn{height:48px}
}
@media (prefers-reduced-motion:reduce){.ss-btn,.ss-input,.ss-chip span,.ss-seg{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Department select</span>
<form class="ss" role="search" aria-label="Shop">
  <label class="visually-hidden" for="ss-dept">Department</label>
  <label class="visually-hidden" for="ss-shop">Search Harbor & Pine</label>
  <div class="input-group">
    <select class="form-select" id="ss-dept" name="dept">
      <option value="">All</option><option>Books</option><option>Kitchen</option><option>Garden</option><option>Outdoor</option>
    </select>
    <input class="form-control" id="ss-shop" type="search" name="q" placeholder="Search Harbor & Pine">
    <button class="btn btn-go" type="submit" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
  </div>
</form></div>

<div><span class="lbl">Scope radios above the field</span>
<form class="ss" role="search" aria-label="Documentation">
  <fieldset class="ss-scopes d-flex flex-wrap gap-2">
    <legend class="visually-hidden">Search in</legend>
    <input type="radio" class="btn-check" name="in" value="all" id="ss-in-all" checked><label class="btn ss-chip" for="ss-in-all">Everything</label>
    <input type="radio" class="btn-check" name="in" value="guides" id="ss-in-guides"><label class="btn ss-chip" for="ss-in-guides">Guides</label>
    <input type="radio" class="btn-check" name="in" value="api" id="ss-in-api"><label class="btn ss-chip" for="ss-in-api">API reference</label>
    <input type="radio" class="btn-check" name="in" value="forum" id="ss-in-forum"><label class="btn ss-chip" for="ss-in-forum">Community</label>
  </fieldset>
  <div class="ss-field position-relative">
    <label class="visually-hidden" for="ss-docs">Search the documentation</label>
    <svg class="ss-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="form-control" id="ss-docs" type="search" name="q" placeholder="webhooks, rate limits…">
    <button class="btn btn-go" type="submit">Search</button>
  </div>
</form></div>

<div><span class="lbl">What and where</span>
<form class="ss ss-duo" role="search" aria-label="Jobs">
  <label class="ss-seg">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <span class="ss-cap">Role or skill</span>
    <input class="form-control" type="search" name="q" placeholder="Product designer">
  </label>
  <label class="ss-seg">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z"/><circle cx="12" cy="9.5" r="2.5"/></svg>
    <span class="ss-cap">Location</span>
    <input class="form-control" type="text" name="where" placeholder="City or “remote”" autocomplete="address-level2">
  </label>
  <button class="btn btn-go" type="submit">Find jobs</button>
</form></div>
CSS 
/* Bootstrap .input-group with .form-select, .btn-check radios and .form-control, recoloured through --ss-* and --bs-btn-* variables. */
.ss{--ss-ink:#1c1917;--ss-text:#44403c;--ss-muted:#6b6560;--ss-line:#857d75;--ss-soft:#f5f2ee;--ss-accent:#c2410c;--ss-accent-dark:#9a3412;
  --ss-ring:rgba(194,65,12,.22);max-width:640px;color:var(--ss-ink)}
.ss .btn-go{--bs-btn-padding-x:20px;--bs-btn-font-weight:600;--bs-btn-font-size:.95rem;--bs-btn-border-radius:12px;--bs-btn-border-width:0;
  --bs-btn-bg:var(--ss-accent);--bs-btn-color:#fff;--bs-btn-hover-bg:var(--ss-accent-dark);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--ss-accent-dark);--bs-btn-active-color:#fff;display:inline-flex;align-items:center;justify-content:center}
.ss .btn:focus-visible,.ss .btn-check:focus-visible+.btn{outline:2px solid var(--ss-accent);outline-offset:2px;box-shadow:none}
.ss .btn-go svg{width:20px;height:20px}
.ss .form-control,.ss .form-select{color:var(--ss-ink);border-color:var(--ss-line);-webkit-appearance:none;appearance:none}
.ss .form-control::placeholder{color:var(--ss-muted);opacity:1}
.ss .form-control:focus,.ss .form-select:focus-visible{border-color:var(--ss-accent);box-shadow:0 0 0 1px var(--ss-accent),0 0 0 4px var(--ss-ring)}
.ss .form-select:focus:not(:focus-visible){box-shadow:none;border-color:var(--ss-line)}
/* A: department select, field and an icon button joined into one bar */
.ss .input-group{height:50px}
.ss .input-group>.form-select{flex:0 0 auto;width:auto;padding:0 34px 0 14px;font-size:.9rem;font-weight:600;color:var(--ss-text);background-color:var(--ss-soft);
  --bs-form-select-bg-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2344403c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-position:right 12px center;background-size:14px;border-radius:12px;cursor:pointer}
.ss .input-group>.form-control{padding:0 16px;font-size:1rem}
.ss .input-group>.btn-go{width:58px;padding:0}
/* B: scope radios above the field */
.ss-scopes{margin-bottom:12px}
.ss .ss-chip{--bs-btn-padding-x:14px;--bs-btn-padding-y:6px;--bs-btn-font-size:.86rem;--bs-btn-font-weight:500;--bs-btn-border-radius:999px;--bs-btn-line-height:1.5;
  --bs-btn-bg:#fff;--bs-btn-color:var(--ss-text);--bs-btn-border-color:var(--ss-line);--bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--ss-text);
  --bs-btn-hover-border-color:var(--ss-ink);--bs-btn-active-bg:var(--ss-ink);--bs-btn-active-color:#fff;--bs-btn-active-border-color:var(--ss-ink)}
.ss-ico{position:absolute;left:16px;top:50%;z-index:1;width:18px;height:18px;margin-top:-9px;color:var(--ss-muted);pointer-events:none}
.ss-field .form-control{height:52px;padding:0 128px 0 46px;font-size:1rem;border-radius:12px}
.ss-field .btn-go{--bs-btn-bg:var(--ss-ink);--bs-btn-hover-bg:#44403c;--bs-btn-active-bg:#44403c;--bs-btn-border-radius:9px;position:absolute;right:6px;top:6px;height:40px}
/* C: two labelled fields in one bar — what and where */
.ss-duo{display:flex;gap:6px;padding:6px;background:#fff;border:1px solid var(--ss-line);border-radius:16px;box-shadow:0 12px 30px rgba(28,25,23,.08)}
.ss-seg{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;margin:0;padding:8px 14px 8px 46px;border-radius:11px;cursor:text;
  transition:background-color .15s,box-shadow .15s}
.ss-seg+.ss-seg::before{content:"";position:absolute;left:-4px;top:14px;bottom:14px;width:1px;background:#d6d3d1}
.ss-seg:hover{background:var(--ss-soft)}
.ss-seg:focus-within{background:#fff7ed;box-shadow:inset 0 0 0 2px var(--ss-accent)}
.ss-seg svg{position:absolute;left:15px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--ss-accent)}
.ss-cap{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ss-text)}
.ss-seg .form-control,.ss-seg .form-control:focus{padding:0;font-size:.98rem;line-height:1.5;background:transparent;border:0;border-radius:0;box-shadow:none}
.ss-duo .btn-go{padding:0 26px}
@media (max-width:600px){
  .ss-duo{flex-direction:column}
  .ss-seg{padding-top:10px;padding-bottom:10px}
  .ss-seg+.ss-seg::before{left:14px;right:14px;top:-4px;bottom:auto;width:auto;height:1px}
  .ss-duo .btn-go{height:48px}
}
@media (prefers-reduced-motion:reduce){.ss-seg{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5d5a55] uppercase">Department select</span>
<form class="max-w-[640px] text-ss-ink" role="search" aria-label="Shop">
  <label class="sr-only" for="ss-dept">Department</label>
  <label class="sr-only" for="ss-shop">Search Harbor & Pine</label>
  <div class="flex h-[50px]">
    <select class="h-full flex-none cursor-pointer appearance-none rounded-l-xl border border-r-0 border-ss-line bg-ss-soft bg-chevron pr-[34px] pl-3.5 text-[.9rem] font-semibold text-ss-text focus-visible:relative focus-visible:z-10 focus-visible:border-ss-accent focus-visible:shadow-[0_0_0_1px_var(--color-ss-accent),0_0_0_4px_rgba(194,65,12,.22)] focus-visible:outline-none" id="ss-dept" name="dept">
      <option value="">All</option><option>Books</option><option>Kitchen</option><option>Garden</option><option>Outdoor</option>
    </select>
    <input class="h-full w-full min-w-0 flex-1 appearance-none rounded-none border border-ss-line bg-white px-4 text-base text-ss-ink transition-[border-color,box-shadow] duration-150 placeholder:text-ss-muted focus:relative focus:z-10 focus:border-ss-accent focus:shadow-[0_0_0_1px_var(--color-ss-accent),0_0_0_4px_rgba(194,65,12,.22)] focus:outline-none motion-reduce:transition-none" id="ss-shop" type="search" name="q" placeholder="Search Harbor & Pine">
    <button class="inline-flex h-full w-[58px] flex-none cursor-pointer items-center justify-center rounded-r-xl bg-ss-accent text-white transition-colors duration-150 hover:bg-ss-accent-dark focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-accent motion-reduce:transition-none" type="submit" aria-label="Search"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
  </div>
</form></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5d5a55] uppercase">Scope radios above the field</span>
<form class="max-w-[640px] text-ss-ink" role="search" aria-label="Documentation">
  <fieldset class="mb-3 flex flex-wrap gap-2">
    <legend class="sr-only">Search in</legend>
    <label class="group relative"><input class="peer absolute inset-0 m-0 size-full cursor-pointer opacity-0" type="radio" name="in" value="all" checked><span class="block rounded-full border border-ss-line bg-white px-3.5 py-1.5 text-[.86rem] font-medium text-ss-text transition-colors duration-150 group-hover:border-ss-ink peer-checked:border-ss-ink peer-checked:bg-ss-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ss-accent motion-reduce:transition-none">Everything</span></label>
    <label class="group relative"><input class="peer absolute inset-0 m-0 size-full cursor-pointer opacity-0" type="radio" name="in" value="guides"><span class="block rounded-full border border-ss-line bg-white px-3.5 py-1.5 text-[.86rem] font-medium text-ss-text transition-colors duration-150 group-hover:border-ss-ink peer-checked:border-ss-ink peer-checked:bg-ss-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ss-accent motion-reduce:transition-none">Guides</span></label>
    <label class="group relative"><input class="peer absolute inset-0 m-0 size-full cursor-pointer opacity-0" type="radio" name="in" value="api"><span class="block rounded-full border border-ss-line bg-white px-3.5 py-1.5 text-[.86rem] font-medium text-ss-text transition-colors duration-150 group-hover:border-ss-ink peer-checked:border-ss-ink peer-checked:bg-ss-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ss-accent motion-reduce:transition-none">API reference</span></label>
    <label class="group relative"><input class="peer absolute inset-0 m-0 size-full cursor-pointer opacity-0" type="radio" name="in" value="forum"><span class="block rounded-full border border-ss-line bg-white px-3.5 py-1.5 text-[.86rem] font-medium text-ss-text transition-colors duration-150 group-hover:border-ss-ink peer-checked:border-ss-ink peer-checked:bg-ss-ink peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ss-accent motion-reduce:transition-none">Community</span></label>
  </fieldset>
  <div class="relative">
    <label class="sr-only" for="ss-docs">Search the documentation</label>
    <svg class="pointer-events-none absolute top-1/2 left-4 size-[18px] -translate-y-1/2 text-ss-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="h-[52px] w-full min-w-0 appearance-none rounded-xl border border-ss-line bg-white pr-32 pl-[46px] text-base text-ss-ink transition-[border-color,box-shadow] duration-150 placeholder:text-ss-muted focus:border-ss-accent focus:shadow-[0_0_0_1px_var(--color-ss-accent),0_0_0_4px_rgba(194,65,12,.22)] focus:outline-none motion-reduce:transition-none" id="ss-docs" type="search" name="q" placeholder="webhooks, rate limits…">
    <button class="absolute top-1.5 right-1.5 inline-flex h-10 cursor-pointer items-center justify-center rounded-[9px] bg-ss-ink px-5 text-[.95rem] font-semibold text-white transition-colors duration-150 hover:bg-[#44403c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-accent motion-reduce:transition-none" type="submit">Search</button>
  </div>
</form></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5d5a55] uppercase">What and where</span>
<form class="flex max-w-[640px] gap-1.5 rounded-2xl border border-ss-line bg-white p-1.5 text-ss-ink shadow-[0_12px_30px_rgba(28,25,23,.08)] max-[600px]:flex-col" role="search" aria-label="Jobs">
  <label class="relative flex min-w-0 flex-1 cursor-text flex-col justify-center gap-px rounded-[11px] py-2 pr-3.5 pl-[46px] transition-[background-color,box-shadow] duration-150 focus-within:bg-[#fff7ed] focus-within:shadow-[inset_0_0_0_2px_var(--color-ss-accent)] hover:bg-ss-soft motion-reduce:transition-none max-[600px]:py-2.5">
    <svg class="absolute top-1/2 left-[15px] size-5 -translate-y-1/2 text-ss-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <span class="text-[.72rem] font-bold tracking-[.06em] text-ss-text uppercase">Role or skill</span>
    <input class="w-full min-w-0 appearance-none border-0 bg-transparent p-0 text-[.98rem] text-ss-ink outline-none placeholder:text-ss-muted" type="search" name="q" placeholder="Product designer">
  </label>
  <label class="relative flex min-w-0 flex-1 cursor-text flex-col justify-center gap-px rounded-[11px] py-2 pr-3.5 pl-[46px] transition-[background-color,box-shadow] duration-150 before:absolute before:top-3.5 before:bottom-3.5 before:-left-1 before:w-px before:bg-[#d6d3d1] focus-within:bg-[#fff7ed] focus-within:shadow-[inset_0_0_0_2px_var(--color-ss-accent)] hover:bg-ss-soft motion-reduce:transition-none max-[600px]:py-2.5 max-[600px]:before:-top-1 max-[600px]:before:right-3.5 max-[600px]:before:bottom-auto max-[600px]:before:left-3.5 max-[600px]:before:h-px max-[600px]:before:w-auto">
    <svg class="absolute top-1/2 left-[15px] size-5 -translate-y-1/2 text-ss-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z"/><circle cx="12" cy="9.5" r="2.5"/></svg>
    <span class="text-[.72rem] font-bold tracking-[.06em] text-ss-text uppercase">Location</span>
    <input class="w-full min-w-0 appearance-none border-0 bg-transparent p-0 text-[.98rem] text-ss-ink outline-none placeholder:text-ss-muted" type="text" name="where" placeholder="City or “remote”" autocomplete="address-level2">
  </label>
  <button class="inline-flex flex-none cursor-pointer items-center justify-center rounded-[11px] bg-ss-accent px-[26px] text-[.95rem] font-semibold text-white transition-colors duration-150 hover:bg-ss-accent-dark focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-accent motion-reduce:transition-none max-[600px]:h-12" type="submit">Find jobs</button>
</form></div>
CSS 
@theme {
  --color-ss-ink: #1c1917;
  --color-ss-text: #44403c;
  --color-ss-muted: #6b6560;
  --color-ss-line: #857d75;
  --color-ss-soft: #f5f2ee;
  --color-ss-accent: #c2410c;
  --color-ss-accent-dark: #9a3412;
}
@utility bg-chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2344403c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

About this set

Search bars that let people narrow the query before they submit it. The set has three patterns. The department select joins a native select, the field and an icon button into one bar, the layout large shops use so someone can search only Books or only Garden. Scope radios above the field turn a documentation search into Everything, Guides, API reference or Community with pill-shaped radio buttons. What and where puts two labelled fields side by side for job boards, directories and booking sites, with a role or skill on the left and a location on the right, and it stacks into a column on phones. Every control is a native element with a label, so the scope submits with the query as an ordinary GET parameter and no JavaScript is needed. The radios are real inputs visually hidden over each pill, so arrow keys move between scopes the way a radio group should. The Bootstrap version uses .input-group with .form-select and .btn-check radios; the Tailwind version uses peer-checked and focus-within utilities.

What’s included

  • Department select, field and button joined into one bar
  • Scope radios styled as pills, grouped in a fieldset with a legend
  • What and where fields with visible labels that stack on phones
  • Everything submits as a normal form, no JavaScript
  • Bootstrap version on .input-group, .form-select and .btn-check

Accessibility

The select and the search field each have a label, the scope radios sit in a fieldset whose hidden legend reads Search in, and the what and where fields use their visible captions as labels. Arrow keys move between scope radios and Tab moves between groups. The select and inputs get an accent ring, the radios draw a 2px outline on the visible pill, and transitions stop under prefers-reduced-motion.

Customise it

Change --ss-accent, --ss-ink and --ss-line on .ss for colour, and the height on .ss-group or .ss-field input for size. Bootstrap reuses the --ss-* properties with --bs-btn-* variables on the chips; in Tailwind edit the --color-ss-* theme colours and the bg-chevron utility for the select arrow.