In Review

Combo Box

Variants

{{ govieComboBox({
"action": "#",
"dropdownItems": [{
"label": "Organisations",
"options": [
  {
    "label": 'An Bord Pleanála',
    "value": '15431907-an-bord-pleanala',
  },
  {
    "label": 'An Garda Síochána',
    "value": 'an-garda-siochana',
  },
  {
    "label": 'Bord Bia (Irish Food Board)',
    "value": '14061907-bord-bia-irish-food-board',
  },
  {
    "label": 'Capital Works Management Framework',
    "value": '7c2ea-capital-works-management-framework',
  },
  {
    "label": 'Carlow County Council',
    "value": 'carlow-county-council',
  },
  {
    "label": 'Cavan County Council',
    "value": 'cavan-county-council',
  },
  {
    "label": 'Central Bank of Ireland',
    "value": '10032007-central-bank-of-ireland',
  },
  {
    "label": 'Central Statistics Office',
    "value": 'central-statistics-office',
  },
  {
    "label": 'Chief State Solicitor’s Office',
    "value": 'chief-state-solicitors-office',
  },
  {
    "label": 'Circulars',
    "value": '28448-circulars',
  },
  {
    "label": 'Civil Justice Review',
    "value": 'dff8b-civil-justice-review',
  },
  {
    "label": 'Civil Service Employee Assistance Service',
    "value": '72752-civil-service-employee-assistance-service',
  },
  {
    "label": 'Clare County Council',
    "value": 'clare-county-council',
  },
  {
    "label": 'Commission on Taxation and Welfare',
    "value": 'c526e-commission-on-taxation-and-welfare',
  },
  {
    "label": 'Commission on the Defence Forces',
    "value": '20d04-commission-of-the-defence-forces',
  }]
}, 
{
  "label": "Category",
  "options": [
  {
    "label": 'Agencies',
    "value": 'agencies',
  },
  {
    "label": 'Aquaculture licences',
    "value": 'aquaculture_licence',
  },
  {
    "label": 'Biographies',
    "value": 'biographies',
  },
  {
    "label": 'Campaigns',
    "value": 'campaigns',
  },
  {
    "label": 'Circulars',
    "value": 'circulars',
  },
  {
    "label": 'Collections',
    "value": 'collections',
  },
  {
    "label": 'Consultations',
    "value": 'consultations',
  },
  {
    "label": 'Coroner cases',
    "value": 'coroner_cases',
  }]
}, 
{
  "label": "Topic",
  "options": [
  {
    "label": 'Brexit',
    "value": 'brexit',
  },
  {
    "label": 'Business and industry',
    "value": 'business-and-industry',
  },
  {
    "label": 'COVID-19',
    "value": 'covid-19',
  },
  {
    "label": 'Corporate information',
    "value": 'corporate-information',
  }]
}]
}) 
}}
<Combobox
action="#"
id="ComboBoxId"
dropdownItems={[
  {
    label: "Organisations",
    options: [
      {
        label: "An Bord Pleanála",
        value: "15431907-an-bord-pleanala",
      },
      {
        label: "An Garda Síochána",
        value: "an-garda-siochana",
      },
      {
        label: "Bord Bia (Irish Food Board)",
        value: "14061907-bord-bia-irish-food-board",
      },
      {
        label: "Capital Works Management Framework",
        value: "7c2ea-capital-works-management-framework",
      },
      {
        label: "Carlow County Council",
        value: "carlow-county-council",
      },
      {
        label: "Cavan County Council",
        value: "cavan-county-council",
      },
      {
        label: "Central Bank of Ireland",
        value: "10032007-central-bank-of-ireland",
      },
    ],
  },
  {
    label: "Category",
    options: [
      {
        label: "Agencies",
        value: "agencies",
      },
      {
        label: "Aquaculture licences",
        value: "aquaculture_licence",
      },
      {
        label: "IGEES Publications",
        value: "igees_publication",
      },
      {
        label: "Local authorities",
        value: "local_authorities",
      },
      {
        label: "News",
        value: "news",
      },
    ],
  },
  {
    label: "Topic",
    options: [
      {
        label: "Brexit",
        value: "brexit",
      },
      {
        label: "Business and industry",
        value: "business-and-industry",
      },
      {
        label: "Organisation information",
        value: "organisation_information",
      },
      {
        label: "Policies",
        value: "policies",
      },
      {
        label: "Policy information",
        value: "policy_information",
      },
      {
        label: "Press releases",
        value: "press_releases",
      },
    ],
  },
]}
/>;

Usage

Best Practices

When to use this component

Use this component when you have to do a complex search that requires a long list of options, categories and a search filter.

When not to use this component

Do not use this component if you have a small amount of options. Use a checkbox group instead.

Status

Figma Library
Considering
Local HTML
N/A
Global HTML
Alpha
Global React
Alpha