Country picker

A country picker gives users a comfortable way to select their country from a long list. Flags make options easy to recognize, recent picks put the likely choices at the top, and typing filters the list for anyone who would rather search than scroll, with the selection submitting like any native form value. Country fields appear in checkout address forms, sign up flows, and shipping or billing settings, anywhere an app needs to know where its users are.
<div class="field w-full max-w-72">
  <label class="label" for="country-picker-input">Country</label>
  <div class="input-group" id="country-picker-field">
    <input
      class="input"
      id="country-picker-input"
      placeholder="Select a country"
      value="🇵🇹 Portugal"
    /><span class="input-group-addon input-group-addon-end"
      ><button
        class="btn btn-ghost btn-xs btn-icon"
        type="button"
        tabindex="-1"
        aria-label="Open list"
      >
        <svg
          class="text-muted-foreground"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg></button
    ></span>
  </div>
</div>
<div class="combobox" data-sp-toggle="#country-picker-field">
  <div class="combobox-empty">No countries found.</div>
  <div class="combobox-list scrollbar scrollbar-sm">
    <div class="combobox-group">
      <div class="combobox-label">Recent</div>
      <div class="combobox-item" data-sp-label="🇵🇹 Portugal">
        <input type="radio" name="country" checked="" value="pt" /><span
          >🇵🇹</span
        >
        Portugal
      </div>
      <div class="combobox-item" data-sp-label="🇺🇸 United States">
        <input type="radio" name="country" value="us" /><span>🇺🇸</span> United
        States
      </div>
    </div>
    <div class="combobox-group">
      <div class="combobox-label">All countries</div>
      <div class="combobox-item" data-sp-label="🇦🇷 Argentina">
        <input type="radio" name="country" value="ar" /><span>🇦🇷</span>
        Argentina
      </div>
      <div class="combobox-item" data-sp-label="🇦🇺 Australia">
        <input type="radio" name="country" value="au" /><span>🇦🇺</span>
        Australia
      </div>
      <div class="combobox-item" data-sp-label="🇧🇷 Brazil">
        <input type="radio" name="country" value="br" /><span>🇧🇷</span> Brazil
      </div>
      <div class="combobox-item" data-sp-label="🇨🇦 Canada">
        <input type="radio" name="country" value="ca" /><span>🇨🇦</span> Canada
      </div>
      <div class="combobox-item" data-sp-label="🇨🇳 China">
        <input type="radio" name="country" value="cn" /><span>🇨🇳</span> China
      </div>
      <div class="combobox-item" data-sp-label="🇪🇬 Egypt">
        <input type="radio" name="country" value="eg" /><span>🇪🇬</span> Egypt
      </div>
      <div class="combobox-item" data-sp-label="🇫🇷 France">
        <input type="radio" name="country" value="fr" /><span>🇫🇷</span> France
      </div>
      <div class="combobox-item" data-sp-label="🇩🇪 Germany">
        <input type="radio" name="country" value="de" /><span>🇩🇪</span> Germany
      </div>
      <div class="combobox-item" data-sp-label="🇮🇳 India">
        <input type="radio" name="country" value="in" /><span>🇮🇳</span> India
      </div>
      <div class="combobox-item" data-sp-label="🇮🇹 Italy">
        <input type="radio" name="country" value="it" /><span>🇮🇹</span> Italy
      </div>
      <div class="combobox-item" data-sp-label="🇯🇵 Japan">
        <input type="radio" name="country" value="jp" /><span>🇯🇵</span> Japan
      </div>
      <div class="combobox-item" data-sp-label="🇰🇪 Kenya">
        <input type="radio" name="country" value="ke" /><span>🇰🇪</span> Kenya
      </div>
      <div class="combobox-item" data-sp-label="🇲🇽 Mexico">
        <input type="radio" name="country" value="mx" /><span>🇲🇽</span> Mexico
      </div>
      <div class="combobox-item" data-sp-label="🇳🇱 Netherlands">
        <input type="radio" name="country" value="nl" /><span>🇳🇱</span>
        Netherlands
      </div>
      <div class="combobox-item" data-sp-label="🇳🇿 New Zealand">
        <input type="radio" name="country" value="nz" /><span>🇳🇿</span> New
        Zealand
      </div>
      <div class="combobox-item" data-sp-label="🇳🇬 Nigeria">
        <input type="radio" name="country" value="ng" /><span>🇳🇬</span> Nigeria
      </div>
      <div class="combobox-item" data-sp-label="🇰🇷 South Korea">
        <input type="radio" name="country" value="kr" /><span>🇰🇷</span> South
        Korea
      </div>
      <div class="combobox-item" data-sp-label="🇪🇸 Spain">
        <input type="radio" name="country" value="es" /><span>🇪🇸</span> Spain
      </div>
      <div class="combobox-item" data-sp-label="🇸🇪 Sweden">
        <input type="radio" name="country" value="se" /><span>🇸🇪</span> Sweden
      </div>
      <div class="combobox-item" data-sp-label="🇬🇧 United Kingdom">
        <input type="radio" name="country" value="gb" /><span>🇬🇧</span> United
        Kingdom
      </div>
    </div>
  </div>
</div>
Browse more dropdown examples.