Search input group

The Search input group component is used anytime a basic search field experience is needed. It is currently used in the Ribbon component and can be used anywhere a search action is required.

Usage

{% set options = {
  "form": {
    "action": "/my-search-page/",
    "attributes": {
      "id": "form-test-id"
    }
  },
  "input":{
    "class": "input-group-md",
    "placeholder": "Search our site"
  },
  "button": {
    "attributes": {
      "id": "button-test-id"
    },
  },
  "icon": {
    "name": "search",
    "class": "miz-icon--md",
  }
} %}

{% include '@miz/components/input-groups/search/search.twig' with options only %}

The above code will output:

<!-- Search input group output -->
<form class="miz-input-group" action="/my-search-page/" method="get" id="form-test-id">
  <label for="search-input" class="sr-only">Search</label>
  <input type="text" class="input-group-md" id="search-input" placeholder="Search our site" />
  <button class="miz-button miz-button--icon miz-button--primary miz-button--small miz-button--square-sm miz-input-group__button" type="button" id="button-test-id">
    <i class="miz-icon material-icons miz-icon--button miz-icon--md">search</i>
  </button>
</form>

See the View tab for each input group variation to see an example of how it is being used.

Options reference

The parameters for this input group have many default values that may not require you to override; in fact, you only need to include the file itself to produce a search field. Only include the ones you need.

form

Param Default Values Description
class miz-input-group String Additional classes appended to the input group
attributes null Object Attributes to be applied to the input group
action /search/ String The resource you’re submitting the search toward. By default this supports our standard path for websites.

input

Param Default Values Description
class miz-input String Additional classes appended to the input field
attributes null Object Attributes to be applied to the input field
id search-input String Value for the id attribute. This will also be applied to a required <label> element
placeholder Search this site String Value for the placeholder attribute in the search field

button

Param Default Values Description
class See output String Additional classes appended to the search button
attributes null Object Attributes to be applied to the search button

icon

Param Default Values Description
class See output String Additional classes appended to the search button icon
attributes null Object Attributes to be applied to the search button icon
{#-
  Form Search
  Base Form Search component

  @uses AddAttributes from utils

  @param  {object}  options
  @param  {object}  ├─ options.form
  @param  {string}  │  ├─ options.form.class
  @param  {object}  │  ├─ options.form.attributes
  @param  {string}  │  └─ options.form.action
  @param  {object}  ├─ options.input
  @param  {string}  │  ├─ options.input.class
  @param  {object}  │  ├─ options.input.attributes
  @param  {string}  │  ├─ options.input.id
  @param  {string}  │  └─ options.input.placeholder
  @param  {object}  ├─ options.button
  @param  {string}  │  ├─ options.class
  @param  {object}  │  └─ options.attributes
  @param  {object}  └─ options.icon
  @param  {string}     ├─ options.class
  @param  {object}     └─ options.attributes

 -#}
{%- spaceless %}
  {# Imports #}
    {% from "@miz/components/buttons/buttons.twig" import ButtonWithIcon as buttonWithIcon %}
    {% import "@miz/utilities/utils.twig" as utils %}

  {# Parameters #}
    {% set options = _context
      ? _context
      : {} %}

    {% set formSearchClass = options.form.class %}
    {% set formSearchClass = utils.AppendClasses( 'miz-input-group', formSearchClass ) %}
    {% set formSearchAction = options.form.action | default( '/search/' ) %}
    {% set formSearchAttributes = options.form.attributes %}

    {% set inputClass = options.input.class | default( 'miz-input' ) %}
    {% set inputId = options.input.id | default('search-input') %}
    {% set inputPlaceholder = options.input.placeholder | default( 'Search this site' ) %}
    {% set inputName = options.input["name"] | default('q') %}

    {% set buttonClass = options.button.class | default( 'miz-button--primary miz-button--small miz-button--square-sm miz-input-group__button' ) %}
    {% set buttonAttributes = options.button.attributes %}
    {% set buttonType = options.button["type"] | default('submit') %}

    {% set iconClass = options.icon.class | default( 'miz-icon--md' ) %}
    {% set iconName = options.icon.name | default( 'search' ) %}

  {# Variables #}
    {% set labelFor = inputId %}
    {% set labelClass = 'sr-only' %}
    {% set labelText = 'Search' %}

    {%- set buttonOptions = {
      class: buttonClass,
      attributes: buttonAttributes,
      type: buttonType
      } -%}

    {% set iconOptions = {
      class: iconClass,
      name: iconName
    } %}
{% endspaceless -%}

{#- Output -#}
  <form class="{{ formSearchClass }}" action="{{ formSearchAction }}" method="get" {{ utils.AddAttributes( formSearchAttributes ) }}>
    <label for="{{ labelFor }}" class="{{ labelClass }}">{{ labelText }}</label>
    <input type="text" class="{{ inputClass }}" id="{{ inputId }}" placeholder="{{ inputPlaceholder }}" name="{{ inputName }}" />
    {{- buttonWithIcon( iconOptions, buttonOptions ) -}}
  </form>
<form class="miz-input-group" action="/search/" method="get">
    <label for="search-input" class="sr-only">Search</label>
    <input type="text" class="miz-input" id="search-input" placeholder="Search this site" name="q" />

    <button class="miz-button miz-button--icon miz-button--primary miz-button--small miz-button--square-sm miz-input-group__button" type="submit">
    
  <i class="miz-icon material-icons miz-icon--button miz-icon--md">search</i>


  </button>

</form>
/* No context defined for this component. */