Select

<!-- Native select (recommended baseline) -->
<div class="form-field">
  <label for="role-select">Role</label>
  <select id="role-select" name="role" required>
    <option value="" disabled selected>Select a role</option>
    <option value="admin">Admin</option>
    <option value="editor">Editor</option>
    <option value="viewer">Viewer</option>
  </select>
  <p class="helper-text">Choose the permission level for this user.</p>
</div>

<!-- Custom select trigger (for custom implementations) -->
<div class="form-field">
  <label id="status-label">Status</label>
  <button
    type="button"
    role="combobox"
    aria-haspopup="listbox"
    aria-expanded="false"
    aria-labelledby="status-label"
    aria-controls="status-listbox"
    class="select-trigger"
  >
    <span class="select-value">Select a status</span>
    <svg aria-hidden="true" class="select-chevron" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"/>
    </svg>
  </button>
  <ul role="listbox" id="status-listbox" aria-labelledby="status-label" hidden>
    <li role="option" aria-selected="false">Active</li>
    <li role="option" aria-selected="false">Inactive</li>
    <li role="option" aria-selected="false">Pending</li>
  </ul>
</div>

import { useState, useRef, useEffect, useId } from "react";

interface Option {
  value: string;
  label: string;
  disabled?: boolean;
}

interface SelectProps {
  label: string;
  options: Option[];
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  error?: string;
  required?: boolean;
}

export default function Select({
  label,
  options,
  value,
  onChange,
  placeholder = "Select an option",
  error,
  required,
}: SelectProps) {
  const [open, setOpen] = useState(false);
  const [focusIdx, setFocusIdx] = useState(-1);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const id = useId();

  const selected = options.find((o) => o.value === value);

  useEffect(() => {
    if (!open) return;
    const handleKey = (e: KeyboardEvent) => {
      switch (e.key) {
        case "ArrowDown":
          e.preventDefault();
          setFocusIdx((i) => Math.min(i + 1, options.length - 1));
          break;
        case "ArrowUp":
          e.preventDefault();
          setFocusIdx((i) => Math.max(i - 1, 0));
          break;
        case "Enter":
        case " ":
          e.preventDefault();
          if (focusIdx >= 0 && !options[focusIdx].disabled) {
            onChange?.(options[focusIdx].value);
            setOpen(false);
            triggerRef.current?.focus();
          }
          break;
        case "Escape":
          setOpen(false);
          triggerRef.current?.focus();
          break;
      }
    };
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [open, focusIdx, options, onChange]);

  return (
    <div className="form-field">
      <label id={`${id}-label`}>{label}{required && " *"}</label>
      <button
        ref={triggerRef}
        type="button"
        role="combobox"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-labelledby={`${id}-label`}
        aria-controls={`${id}-listbox`}
        className={`select-trigger ${error ? "select-error" : ""}`}
        onClick={() => { setOpen(!open); setFocusIdx(options.findIndex((o) => o.value === value)); }}
      >
        {selected?.label ?? placeholder}
      </button>

      {open && (
        <ul ref={listRef} role="listbox" id={`${id}-listbox`} aria-labelledby={`${id}-label`}>
          {options.map((opt, i) => (
            <li
              key={opt.value}
              role="option"
              aria-selected={opt.value === value}
              aria-disabled={opt.disabled || undefined}
              className={i === focusIdx ? "option-focused" : ""}
              onClick={() => { if (!opt.disabled) { onChange?.(opt.value); setOpen(false); } }}
            >
              {opt.label}
              {opt.value === value && <span aria-hidden="true">✓</span>}
            </li>
          ))}
        </ul>
      )}
      {error && <p className="field-error" role="alert">{error}</p>}
    </div>
  );
}