// src/components/patterns/search/query/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/search/query
additionalProperties: false
required:
  - keywords
properties:
  keywords:
    $ref: /fsk/form/form-element

// src/components/patterns/search/query/mocks.yaml

keywords:
  $tpl: '@fsk/form/form-element'
  $ref: '@fsk/form/form-element#input'
  attributes:
    $drupal: true
    class: Query-inputHolder
  label:
    attributes:
      $drupal: true
      for: search-input
    title: Suchbegriff eingeben
    title_display: invisible
  children:
    attributes:
      $drupal: true
      id: search-input
      required: true
      value: My search query
      placeholder: Suchbegriff eingeben ...
      name: query

// src/components/patterns/search/query/query.html.twig

<div class="Query {% if class %} {{ class }}{% endif %}">
  <h1 class="u-typo-headline5 Query-headline">Suchbegriff eingeben</h1>
  <div class="u-grid">
    {{ keywords }}
    {% include "@elements/button/button.html.twig" with {
      class: "Query-searchButton",
      icon: "search",
      label: "Suchen",
      type: "submit"
    } only %}
  </div>
</div>