How to customize the default search block form template?

Question

How can I customize the default search block form template, I now use below template to display a search form block, but this code doesn't allow me to edit and customize each part of this form separately and doesn't have any flexibility.

form--search-block-form.html.twig

<form{{ attributes.addClass('search-form', 'search-block-form') }}>
  {{ children }}
</form>

and then print in my theme by below code:

{{ page.search_box }}

Is there any better template name suggestion with more variables and flexibility in customization?

Answer 1

If you want to use Twig, you can do it by creating a template file, like this:

/themes/your_theme/templates/form--search-block-form.html.twig

{% set form = element %}

hello {{ form.keys }} world {{ form.actions }}

---

Result:

In Bartik theme:

Answer 2

The search block is provided by the core module Search. If you install this module the block will be available in the block layout, when you place a block.

Probably you have already done this by installing the standard profile.

To customize the search form you can use a form alter hook.

For example put this function in mytheme.theme to change the search button:

function mytheme_form_alter(&$form, $form_state) {
  if ( $form['#form_id'] == 'search_block_form' ) {
    $form['actions']['submit']['#value'] = t('Search my Website');
  }
}

Answer 3

I have gone a 2 days journey now inspecting container.html.twig and extra suggestions for it and lots of other dead end solutions.

I finaly came back here and got a result i want to keep here for reference:

i developed and tested this code with Drupal 9.0.1

myTheme.theme:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for form templates.
 *
 * @hook: form
 * @suggestion: search_block_form
 * @result: loads template form--search_block_form.html.twig
 */
function myTheme_theme_suggestions_form_alter(array &$suggestions, array $variables) {
  if ($variables['element']['#form_id'] == 'search_block_form') {
    $suggestions[] = 'form__search_block_form';
  }
}

form--search-block-form.html.twig:

{#
/**
 * @file
 * Custom Search form template
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the wrapper element.
 * - children: The child elements of the form.
 * - element: Not documented but exits, need to find out more
 *
 * @see template_preprocess_form()
 * @why the default call of `{{ children }}` calls a "container.twig.html"
 *      instead of the form elements itself "input.twig.html"
 *      its technically not necessary to have container markup arround
 *      label, text input and submit button and its a drawback for
 *      extended CSS layouts that get way more complex on such markup
 */
#}
{# extend element attributes (taken from bartik) #}
{%
  set attributes = attributes.addClass('search-form', 'search-block-form')
%}
{# create attributes for the search input field by system variable #}
{%
  set input_attributes = create_attribute(element.keys['#attributes'])
%}
{# extend attributes for the search input field #}
{%
  set input_attributes = input_attributes.setAttribute('placeholder', element.keys['#title'])
%}
{# create attributes for the search submit button by system variable #}
{%
  set submit_attributes = create_attribute(element.actions['submit']['#attributes'])
%}
<form{{ attributes }}>
  <label for="{{ input_attributes.id }}">{{ element.keys['#title'] }}</label>
  <input{{ input_attributes }} />
  <button{{ submit_attributes }}><span class="visually-hidden">{{  element.actions['submit']['#value'] }}</span></button>
</form>

also possible variants for submit:

<input{{ submit_attributes }} />
<button{{ submit_attributes }}>{{  element.actions['submit']['#value'] }}</button>