<div class="space-y-4">
  <label class="select-label" for="basic-select">Choose an option</label>
  <div class="select-wrapper max-w-xs">
    <select id="basic-select">
      <option value="" disabled selected>Select…</option>
      <option value="1">Option One</option>
      <option value="2">Option Two</option>
      <option value="3">Option Three</option>
      <option value="4">Option Four</option>
    </select>
    <svg class="chevron" viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M7 10l5 5 5-5"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
  <p class="select-helper">This is a helper text for the select</p>
</div>

<div class="space-y-4">
  <label class="select-label max-w-xs"> Country <span class="required">*</span> </label>
  <div class="select-wrapper max-w-xs">
    <select required>
      <option value="" disabled selected>Select country...</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="ca">Canada</option>
      <option value="au">Australia</option>
    </select>
    <svg class="chevron" viewBox="0 0 24 24">
      <path
        d="M7 10l5 5 5-5"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
  <p class="select-helper">Please select your country of residence</p>
</div>

<div class="space-y-4">
  <div>
    <label class="select-label text-xs">Tiny (28px)</label>
    <div class="select-wrapper tiny max-w-xs">
      <select>
        <option value="" disabled selected>Tiny select...</option>
        <option value="xs">Extra Small</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  </div>

  <div>
    <label class="select-label text-sm">Small (32px)</label>
    <div class="select-wrapper small max-w-xs">
      <select>
        <option value="" disabled selected>Small select...</option>
        <option value="xs">Extra Small</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  </div>

  <div>
    <label class="select-label">Default (40px)</label>
    <div class="select-wrapper max-w-xs">
      <select>
        <option value="" disabled selected>Default select...</option>
        <option value="xs">Extra Small</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  </div>

  <div>
    <label class="select-label text-base">Large (48px)</label>
    <div class="select-wrapper large max-w-xs">
      <select>
        <option value="" disabled selected>Large select...</option>
        <option value="xs">Extra Small</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  </div>

  <div>
    <label class="select-label text-lg">Big (56px)</label>
    <div class="select-wrapper big max-w-xs">
      <select>
        <option value="" disabled selected>Big select...</option>
        <option value="xs">Extra Small</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  <div>
    <label class="select-label">Error State</label>
    <div class="select-wrapper error max-w-xs">
      <select>
        <option value="" disabled selected>Select…</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <p class="select-helper">This field is required</p>
  </div>

  <div>
    <label class="select-label">Success State</label>
    <div class="select-wrapper success max-w-xs">
      <select>
        <option value="">Select…</option>
        <option value="1" selected>Successfully Selected</option>
        <option value="2">Option 2</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <p class="select-helper">Valid selection</p>
  </div>

  <div>
    <label class="select-label">Warning State</label>
    <div class="select-wrapper warning max-w-xs">
      <select>
        <option value="" disabled selected>Please reconsider...</option>
        <option value="1">Safe Option</option>
        <option value="2">Risky Option</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <p class="select-helper">Please review</p>
  </div>

  <div>
    <label class="select-label">Disabled State</label>
    <div class="select-wrapper max-w-xs">
      <select disabled>
        <option value="" disabled selected>Disabled Select</option>
        <option value="1">Option 1</option>
      </select>
      <svg class="chevron" viewBox="0 0 24 24">
        <path
          d="M7 10l5 5 5-5"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <p class="select-helper">Field is disabled</p>
  </div>
</div>

<div class="space-y-4">
  <label class="select-label">Select a Country</label>
  <div class="select-wrapper max-w-xs">
    <select>
      <option value="" disabled selected>Select country…</option>
      <optgroup label="North America">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="mx">Mexico</option>
      </optgroup>
      <optgroup label="Europe">
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="fr">France</option>
        <option value="es">Spain</option>
      </optgroup>
      <optgroup label="Asia">
        <option value="jp">Japan</option>
        <option value="cn">China</option>
        <option value="in">India</option>
      </optgroup>
    </select>
    <svg class="chevron" viewBox="0 0 24 24">
      <path
        d="M7 10l5 5 5-5"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
</div>

<div class="space-y-4">
  <label class="select-label">Select Technologies</label>
  <div class="select-wrapper max-w-xs">
    <select multiple size="5">
      <option value="js">JavaScript</option>
      <option value="ts">TypeScript</option>
      <option value="react">React</option>
      <option value="vue">Vue</option>
      <option value="angular">Angular</option>
      <option value="svelte">Svelte</option>
    </select>
  </div>
  <p class="select-helper">Hold Ctrl/Cmd to select multiple options</p>
</div>