7. Select

Consome o form-field (§2). Abre a família de ESCOLHA do bloco (select → combobox → checkbox → radio → switch) e carrega a régua que governa todos.

Base de evidência (3 rodadas encadeadas, 2026-08-02): R1 (canon) — GOV.UK ("último recurso" em serviço público, com pesquisa), NN/g dropdowns (limiares <5 radios / >15 combobox), USWDS (<7), M3 (6), Carbon (3), CMS.gov (janela 7–15 + regras satélites), Parliament/Bristol/Pelican. R2 (herda: nativo × custom + mobile) — a própria stack: shadcn mantém DOIS selects (custom Radix e Native Select), comunidade documenta o trade-off e a regra de não misturar. R3 (herda: o custom é seguro o bastante?) — Sarah Higley (Microsoft): teste de usabilidade real com leitores — recriar o <select> nativo é impossível (semântica por plataforma, teclado inconsistente, mobile inteiramente diferente); ARIA 1.2 foi o padrão menos bugado (= o que o Radix implementa); Angular Material recomenda nativo p/ a11y. Decisões G1–G7 aprovadas pelo Rafael em 2026-08-02.

7.1 A régua unificada da família de escolha (G1 — governa 5 componentes)#

Supersede: esta régua ATUALIZA a linha de volume do §3.1 (que citava só o Fiori). No formulário público vale o espírito GOV.UK (G7): antes de aceitar um select, reformule a pergunta para caber em radios; no ERP denso, o select curto é ferramenta legítima de densidade — o "último recurso" nasceu do one-thing-per-page de governo, não de toolbars com 12 filtros.

7.2 As 7 decisões (G1–G7, aprovadas 2026-08-02)#

7.3 Anatomia e estados (variante nativa — a padrão)#

<select> nativo com appearance:none + chevron SVG próprio (o nativo não estiliza a seta) sobre a moldura do form-field: mesma altura (44px md), mesma borda (4.74:1), mesmos 9 estados NO TRIGGER (o painel de opções aberto é do OS/browser — não estilizamos, e isso é a FEATURE: é o painel que o usuário do dispositivo conhece). Dark: o trigger segue os tokens; o painel nativo segue o OS — documentado como comportamento esperado, não bug. Variante custom (Radix): trigger idêntico; painel usa surface-overlay + shadow-overlay (tokens de elevação v1.1); opção rica = ícone 20px + texto + metadado opcional em --seed-field-help-text.

7.4 Contrato HTML#

<select> + <option> com value estável (nunca o texto como valor) · placeholder: <option value="" disabled selected hidden>Selecione…</option> · grupos: <optgroup label> · autocomplete quando aplicável (country, address-level1…) · form-field completo em volta (rótulo/ajuda/erro herdados).

7.5 Microcopy#

Rótulo nomeia a coisa ("Concessionária"), placeholder instrui a ação ("Selecione…") — nunca o contrário. Opções em sentence case, ordenadas por LÓGICA do domínio (frequência de uso > alfabética > alfabética como fallback); nunca "Escolha uma opção acima" como erro — o erro do form-field diz o quê: "Selecione a concessionária".

7.6 Código — essência#

.seed-select{appearance:none;-webkit-appearance:none;
  height:var(--seed-field-height-md);padding:0 40px 0 12px;width:100%;
  font-family:var(--seed-font-sans);font-size:14px;color:var(--seed-field-value);
  background:var(--seed-field-bg);border:1px solid var(--seed-field-border);
  border-radius:var(--seed-field-radius);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16'%3E%3Cpath fill='%234D606C' d='M4.3 6.3 8 10l3.7-3.7 1 1L8 12 3.3 7.3l1-1Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.seed-select:hover{border-color:var(--seed-field-border-hover)}
.seed-select:focus-visible{outline:none;box-shadow:var(--seed-focus-ring)}
.seed-select:invalid{color:var(--seed-field-placeholder)} /* placeholder-option selecionada */
[data-theme="dark"] .seed-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16'%3E%3Cpath fill='%23ACBECA' d='M4.3 6.3 8 10l3.7-3.7 1 1L8 12 3.3 7.3l1-1Z'/%3E%3C/svg%3E")}

/* Nativo (padrão — G2): */
export function NativeSelect(props: React.SelectHTMLAttributes<HTMLSelectElement> & { placeholder?: string }) {
  const { id, helpId, errId, invalid } = useField();
  return (
    <select id={id} aria-invalid={invalid || undefined}
      aria-describedby={cn(invalid && errId, helpId) || undefined}
      className="seed-select" {...props}>
      {props.placeholder && <option value="" disabled hidden>{props.placeholder}</option>}
      {props.children}
    </select>
  );
}
/* Custom (produto desktop, opção rica): shadcn <Select> (Radix, ARIA 1.2) com
   SelectTrigger reestilizado nos mesmos tokens do trigger nativo e
   SelectContent em surface-overlay + shadow-overlay. Regra G2: nunca os dois
   no mesmo formulário; no toque, o custom degrada para o nativo. */

7.7 Aplicação dos 7 testes (§1.12)#

1. Container 3:1: trigger herda (4.74/4.50); chevron 4.66:1 (cinza-700 sobre branco, decorativo com redundância do próprio trigger). ✅ 2. Mecanismos: placeholder ≠ valor por COR (4.74 vs 13.86 — mesmo mecanismo do input); aberto/fechado pelo painel, não por tom. ✅ 3. Grayscale: chevron + moldura carregam o papel sem matiz. ✅ 4. Par: nativo × custom lado a lado no preview — triggers idênticos (é o objetivo: o usuário não deve notar a diferença fechado). ✅ 5. Regra do um: uma escolha por select (multi é proibido — G5). ✅ 6. Estado atual: valor selecionado sempre visível no trigger; placeholder denuncia o não-preenchido pela cor. ✅ 7. Polegar 360px: nativo abre o picker do OS — a melhor experiência de toque possível por definição; trigger 44px full-width. ✅

---