Searchbar examples

Show params

Params

params:
- name: id
  type: string
  required: true
  description: The id of the input
- name: value
  type: string
  required: false
  description: Optional initial value of the input.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: classes
  type: string
  required: false
  description: Classes to add to the input.
- name: buttonClasses
  type: string
  required: false
  description: Classes to add to the search icon.
- name: button
  type: component
  required: false
  description: button component parameters. If there are any, the searchbar will show a button after the input instead of the lens icon.
- name: placeholder
  type: string
  required: false
  description: Placeholder text
- name: disabled
  type: boolean
  required: false
  description: If true, input will be disabled.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the anchor tag.

default

Show code

Macro

{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-1",
  "label": {
    "text": "Buscar"
  }
})  }}

Markup



<!-- searchbar -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="searchbar-1">Buscar</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="searchbar-1" name="searchbar-1" type="search">
    <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
      <span class="sr-only">Buscar</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
    </button>
</div>
<!-- /searchbar -->

with placeholder

Show code

Macro

{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-2",
  "label": {
    "text": "Buscar"
  },
  "placeholder": "Buscar en este sitio"
})  }}

Markup



<!-- searchbar -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="searchbar-2">Buscar</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="searchbar-2" name="searchbar-2" type="search" placeholder="Buscar en este sitio">
    <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
      <span class="sr-only">Buscar</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
    </button>
</div>
<!-- /searchbar -->

disabled

Show code

Macro

{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-3",
  "label": {
    "text": "Buscar"
  },
  "disabled": true
})  }}

Markup



<!-- searchbar -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="searchbar-3">Buscar</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="searchbar-3" name="searchbar-3" type="search" disabled>
    <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" disabled="disabled" aria-disabled="true">
      <span class="sr-only">Buscar</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
    </button>
</div>
<!-- /searchbar -->

error message

Error: Error: Error message goes here

Show code

Macro

{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-4",
  "label": {
    "text": "Buscar"
  },
  "errorMessage": {
    "text": "Error: Error message goes here",
    "classes": "mt-xs"
  }
})  }}

Markup



<!-- searchbar -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="searchbar-4">Buscar</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full border-alert-base ring-2 ring-alert-base " id="searchbar-4" name="searchbar-4" type="search" aria-describedby="searchbar-4-error" aria-errormessage="searchbar-4-error" aria-invalid="true">
    <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
      <span class="sr-only">Buscar</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
    </button>
  <!-- error-message -->
  <p id="searchbar-4-error" class="block font-semibold text-alert-base mt-xs">
  <span class="sr-only">Error:</span> Error: Error message goes here
  </p>
  <!-- /error-message -->
</div>
<!-- /searchbar -->

small

Show code

Macro

{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-5",
  "label": {
    "text": "Buscar"
  },
  "classes": "c-input--sm",
  "buttonClasses": "m-xs p-0.5 text-xs"
})  }}

Markup



<!-- searchbar -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="searchbar-5">Buscar</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full c-input--sm" id="searchbar-5" name="searchbar-5" type="search">
    <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
      <span class="sr-only">Buscar</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
    </button>
</div>
<!-- /searchbar -->

custom button

Add button params to substitute lens icon button with a button next to input.

Show code

Macro

{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-6",
  "label": {
    "text": "Buscar en esta página"
  },
  "button": {
    "text": "Buscar",
    "type": "submit",
    "classes": "c-button--primary ml-sm"
  },
  "classes": "flex-1"
})  }}

Markup



<!-- searchbar -->
<div class="relative flex flex-wrap items-end">
  <!-- label -->
  <label class="block sr-only" for="searchbar-6">Buscar en esta página</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base flex-1" id="searchbar-6" name="searchbar-6" type="search">
    

<!-- button --><button type="submit" class="c-button c-button--primary ml-sm" >
  Buscar
</button><!-- /button -->
</div>
<!-- /searchbar -->

custom button default small

Add button params to substitute lens icon button with a button next to input.

Show code

Macro

{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
{{ componentSearchbar({
  "id": "searchbar-7",
  "label": {
    "text": "Buscar en esta página"
  },
  "button": {
    "text": "Buscar",
    "type": "submit",
    "classes": "c-button--sm ml-sm"
  },
  "classes": "flex-1 c-input--sm"
})  }}

Markup



<!-- searchbar -->
<div class="relative flex flex-wrap items-end">
  <!-- label -->
  <label class="block sr-only" for="searchbar-7">Buscar en esta página</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base flex-1 c-input--sm" id="searchbar-7" name="searchbar-7" type="search">
    

<!-- button --><button type="submit" class="c-button c-button--sm ml-sm" >
  Buscar
</button><!-- /button -->
</div>
<!-- /searchbar -->