Code examples

Use semantic HTML

  • This semantic HTML contains all accessibility features by default.
  • Include a search button

Search with autocomplete suggestions

Search results

<form role="search" action="/demos/search/">
  <label for="atomic-search">
    Search this website:
  </label>
  <input list="components" type="search" id="atomic-search">
  <datalist id="components"> 
    <option value="Alert"> 
    <option value="Animation"> 
    <option value="Button"> 
    <option value="Checkbox">
    <option value="Date picker">
    <option value="Expander accordion">
    <option value="Footer / contentinfo">
    <option value="Form">
    <option value="Header / banner">
    <option value="Heading: h1, h2, h3">
  </datalist>

  <button type="submit">
    <span class="hidden">Search</span>
  </button>
</form>

Related search input entries