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{{ attributes.addClass('search-form', 'search-block-form') }}>
  {{ children }}

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?

3 Answers 3


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


{% set form = element %}

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


enter image description here

In Bartik theme:

enter image description here

  • 2
    Not to hijack your answer, but ... if you do want to use twig, is there no other way then via a custom module? Probably a stupid question, but still: in D7 you'd grab an appropriate template (or create one with the correct name), and put it in the right spot. Are you saying that in D8 there's no such thing? If you think this is too much hijacking, just let my know (I'll then copy/paste this comment in a new answer ...). Aug 24, 2016 at 14:56
  • 1
    @Pierre.Vriens Are you saying that in D8 there's no such thing? yes, unfortunately, for forms there isn't a template that you can just grab out of the box.
    – No Sssweat
    Aug 24, 2016 at 23:07

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');
  • 1
    Thank you so much for your help and attention, is there any way or method to customize or create a search form in twig template without need to use preprocess function? Aug 11, 2016 at 17:48
  • That depends, what is difficult in twig is to target a specific form, like I did in the hook. If you want to change a form element in general, then use the twig of that element.
    – 4uk4
    Aug 11, 2016 at 18:13
  • 1
    There is nothing like a simple twig solution for a search form element, as far as I know.
    – 4uk4
    Aug 11, 2016 at 19:54
  • @4k4 Is there a way to add an attribute on search input field?
    – CocoSkin
    Oct 30, 2020 at 20:20

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


 * 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';


 * @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>

also possible variants for submit:

<input{{ submit_attributes }} />
<button{{ submit_attributes }}>{{  element.actions['submit']['#value'] }}</button>
  • i also would like to handle that particular form different based on in which region its displayed. that seems impossible. No variable about that information is accessible in that template. Jun 26, 2020 at 23:11
  • haha they removed the possibility with no need: drupal.org/project/drupal/issues/1968360 - "no one needs it" lol... Jun 26, 2020 at 23:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.