Toolbar

Groups search, filters and actions above a table.

When to use it

• Above a table or list that can be searched or filtered.

When not to use it

• A form. Use the form's own layout.

Examples

Each example is a conformance case: every emitter — React, and each framework adapter — is checked against exactly this markup.

basic

<div class="gov-toolbar">
  <div class="gov-field">
    <label class="gov-field__label" for="search">Search employees</label>
    <input class="gov-input" id="search" name="search" type="search" placeholder="Search employees">
  </div>
  <div class="gov-field">
    <label class="gov-field__label" for="department">Department</label>
    <select class="gov-select" id="department" name="department">
      <option value="all">All departments</option>
      <option value="engineering">Engineering</option>
    </select>
  </div>
</div>

{
  "children": [
    {
      "component": "input",
      "props": {
        "name": "search",
        "label": "Search employees",
        "type": "search",
        "placeholder": "Search employees"
      }
    },
    {
      "component": "select",
      "props": {
        "name": "department",
        "label": "Department",
        "options": [
          {
            "value": "all",
            "label": "All departments"
          },
          {
            "value": "engineering",
            "label": "Engineering"
          }
        ]
      }
    }
  ]
}

Accessibility

• A layout container. It deliberately does not use role='toolbar', which would impose arrow-key navigation and take Tab away from the controls inside — wrong for a row of filters and a search box.

Class names

View the manifest for this component: packages/manifest/components/toolbar.json