<div style="display:grid;gap:16px;max-width:420px">
<.input_group field={Field::named("q", "")} label="Search" type="search" placeholder="Search projects…">
<:before><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></:before>
<:after><.kbd>⌘K</.kbd></:after>
</.input_group>
<.input_group field={Field::named("workspace[domain]", "acme.dev")} prefix="https://" />
<.input_group field={Field::named("api_key", "sk_live_51Hx…9fQ")} label="API key" readonly>
<:after><button class="ui-btn" data-variant="ghost" type="button"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="14" height="14" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>Copy</button></:after>
</.input_group>
</div>