SearchField

---
import { Icon, InputGroup, Kbd, SearchField } from '@santi020k/lumen-astro'
---

<InputGroup>
  <Icon name="search" decorative />
  <SearchField name="q" placeholder="Search docs" />
  <div class="pointer-events-none flex items-center gap-1 px-2 opacity-50">
    <Kbd>Cmd</Kbd>
    <Kbd>K</Kbd>
  </div>
</InputGroup>

import { Icon, InputGroup, Kbd, SearchField } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <InputGroup>
      <Icon name="search" decorative />
      <SearchField name="q" placeholder="Search docs" />
      <div className="pointer-events-none flex items-center gap-1 px-2 opacity-50">
        <Kbd>Cmd</Kbd>
        <Kbd>K</Kbd>
      </div>
    </InputGroup>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-input-group>
  <lumen-icon name="search" decorative></lumen-icon>
  <lumen-search-field name="q" placeholder="Search docs"></lumen-search-field>
  <div class="pointer-events-none flex items-center gap-1 px-2 opacity-50">
    <lumen-kbd>Cmd</lumen-kbd>
    <lumen-kbd>K</lumen-kbd>
  </div>
</lumen-input-group>