Sort Control

Changes ordering.

html

<div class="sortctrl" style="--accent:#A8E6C1;">
  <label class="sortctrl__label" for="sortctrl-field">Sort by</label>
  <div class="sortctrl__row">
    <select id="sortctrl-field" class="sortctrl__select">
      <option>Name</option>
      <option>Date</option>
      <option>Price</option>
    </select>
    
    <button type="button" class="sortctrl__dir sortctrl__dir--asc" aria-label="Sort ascending">
      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M7 12V2M3 6l4-4 4 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    
    
  </div>
  <p class="sortctrl__note">Sorting by Name</p>
</div>
<style>
.sortctrl { font: 14px system-ui, sans-serif; color: #241430; max-width: 260px; }
.sortctrl__label { display: block; margin-bottom: 6px; font-weight: 500; }
.sortctrl__row { display: flex; gap: 8px; }
.sortctrl__select { flex: 1; box-sizing: border-box; padding: 9px 10px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; border-radius: 8px; }
.sortctrl__select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.sortctrl__dir { width: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #24143040; background: #FAF7F2; color: #241430; border-radius: 8px; cursor: pointer; }
.sortctrl__dir:hover, .sortctrl__dir:focus-visible { border-color: var(--accent); outline: none; }
.sortctrl__note { margin: 8px 0 0; font-size: 12px; color: #24143099; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] max-w-[260px]">
  <label for="sortctrl-field-tw" class="block mb-1.5 font-medium">Sort by</label>
  <div class="flex gap-2">
    <select id="sortctrl-field-tw" class="flex-1 box-border px-2.5 py-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143040] rounded-lg focus-visible:outline-none sortctrl-select-tw">
      <option>Name</option>
      <option>Date</option>
      <option>Price</option>
    </select>
    
    <button type="button" aria-label="Sort ascending" class="w-[38px] shrink-0 inline-flex items-center justify-center border-[1.5px] border-[#24143040] bg-[#FAF7F2] text-[#241430] rounded-lg cursor-pointer focus-visible:outline-none sortctrl-dir-tw">
      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M7 12V2M3 6l4-4 4 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    
    
  </div>
  <p class="mt-2 text-xs text-[#24143099]">Sorting by Name</p>
</div>
<style>
.sortctrl-select-tw:focus-visible { border-color: #A8E6C1; }
.sortctrl-dir-tw:hover, .sortctrl-dir-tw:focus-visible { border-color: #A8E6C1; }
</style>

react

export function SortControl({
  label = "Sort by",
  field = "Name",
  ascending = true,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 260 }}>
      <label htmlFor="sortctrl-field-react" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</label>
      <div style={{ display: "flex", gap: 8 }}>
        <select id="sortctrl-field-react" style={{ flex: 1, boxSizing: "border-box", padding: "9px 10px", font: "inherit", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143040", borderRadius: 8 }}>
          <option>Name</option>
          <option>Date</option>
          <option>Price</option>
        </select>
        <button type="button" aria-label={ascending ? "Sort ascending" : "Sort descending"} style={{ width: 38, flexShrink: 0, display: "inline-flex", alignItems: "center", justifyContent: "center", border: `1.5px solid ${accent}`, background: "#FAF7F2", color: "#241430", borderRadius: 8, cursor: "pointer" }}>
          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
            {ascending
              ? <path d="M7 12V2M3 6l4-4 4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
              : <path d="M7 2v10M3 8l4 4 4-4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />}
          </svg>
        </button>
      </div>
      <p style={{ margin: "8px 0 0", fontSize: 12, color: "#24143099" }}>Sorting by {field}</p>
    </div>
  );
}