SearchInput

render: () => (
  <div className="workshop-stack workshop-constrained">
    <Field
      label="Search in the current project"
      htmlFor="sample-search"
      description="Try searching for theme or component. Results come only from the three local items below."
    >
      <SearchInput
        id="sample-search"
        name="query"
        label="Search in the current project"
        placeholder="Enter a word from the title…"
      />
    </Field>
    <section aria-label="Search results" className="workshop-search-results">
      {[
        ["Component usage guide", "12 basic components · local sample"],
        ["Theme design notes", "MeowUI light and dark appearance · local sample"],
        ["Icon catalog", "32 functional glyphs · local sample"],
      ].map(([title, detail]) => (
        <article data-search-title={title}>
          <h3>{title}</h3>
          <p>{detail}</p>
        </article>
      ))}
      <p data-search-empty hidden>
        No matching titles; try a shorter word.
      </p>
    </section>
    <Note role="status" data-search-count>
      3 local results
    </Note>
    <section className="workshop-stack" aria-label="Other search states">
      <Field
        label="Scope locked"
        htmlFor="locked-query"
        description="Read-only text can still be selected and copied."
      >
        <SearchInput id="locked-query" label="Scope locked" value="packages/meowtail" readOnly />
      </Field>
      <Field label="Waiting for index" htmlFor="pending-query">
        <SearchInput
          id="pending-query"
          label="Waiting for index"
          placeholder="Search becomes available after indexing"
          disabled
        />
      </Field>
      <Field
        label="Query format"
        htmlFor="invalid-query"
        error="This sample accepts title text only; remove the filter expression."
      >
        <SearchInput id="invalid-query" label="Query format" value="type:" />
      </Field>
    </section>
  </div>
)