Region selector

Region, then sub-region. State and local government area in Nigeria, county and sub-county in Kenya, region and district in Ghana. The names and the divisions come from the pack.

When to use

For an address, a place of birth, or where a service is delivered. Anywhere the answer is an administrative area.

When not to use

For a free-text address line. Use a text input for streets and landmarks.

Region

District

Show HTML

<div class="ag-field">
  <label class="ag-label" for="rg-region" data-docs-string="region-label">Region</label>
  <select class="ag-select" id="rg-region" name="region" data-docs-regions data-ag-region-for="rg-sub">
    <option value="" data-docs-string="region-choose">Choose a region</option>
    <option>Central</option>
    <option>Coastal</option>
    <option>Eastern</option>
    <option>Northern</option>
    <option>Southern</option>
    <option>Western</option>
  </select>
</div>
<div class="ag-field ag-mb-0">
  <label class="ag-label" for="rg-sub" data-docs-string="subregion-label">District</label>
  <select class="ag-select" id="rg-sub" name="district" data-docs-subregions>
    <option value="" data-docs-string="subregion-choose">Choose a district</option>
    <optgroup label="Central">
      <option>Central North</option>
      <option>Central South</option>
    </optgroup>
    <optgroup label="Coastal">
      <option>Port</option>
      <option>Bay</option>
    </optgroup>
    <optgroup label="Eastern">
      <option>East Hills</option>
      <option>East Plains</option>
    </optgroup>
    <optgroup label="Northern">
      <option>North Ridge</option>
      <option>North Valley</option>
    </optgroup>
    <optgroup label="Southern">
      <option>South Coast</option>
      <option>South Plateau</option>
    </optgroup>
    <optgroup label="Western">
      <option>West Lakes</option>
      <option>West Forest</option>
    </optgroup>
  </select>
</div>

Pick a region and the second list narrows. Turn JavaScript off and it shows every division, grouped.

How it works

The first select carries data-ag-region-for with the id of the second.
The second select groups its options in optgroups whose label is the region name. That is the no-script state, and it is complete and accessible on its own.
With afrigov.js, choosing a region hides and disables the other groups. Changing region clears a sub-region that no longer applies.
The packs carry a handful of divisions per region as examples. A real service supplies its own full list from its data.

Accessibility

Two labelled selects, so screen readers announce each on its own. No custom widget.
Hidden groups are also disabled, so keyboard users cannot land on an option that does not apply.
Keep the order stable. Sort regions alphabetically unless the country has a conventional order.

Pack fields

regions.label, regions.choose, regions.items, regions.sub.label, regions.sub.choose, regions.sub.items.