Skip to Content
ComponentsAtomsSelect

Select

Atom

Select escolhe uma opção entre valores conhecidos quando não vale mostrar todas as opções na tela.

Use quando há mais opções do que caberia bem em Radio Group ou quando o espaço da interface é limitado. Para 2–5 opções que precisam ser comparadas visualmente, prefira Radio Group. Para múltipla escolha, use Checkbox ou Multi-select.

Exemplos copiáveis

React

import * as React from "react"
 
type SelectOption = {
  value: string
  label: string
  disabled?: boolean
}
 
type PulsoSelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children"> & {
  label: string
  placeholder?: string
  description?: string
  options: SelectOption[]
}
 
export function PulsoSelect({
  id,
  label,
  placeholder = "Selecione…",
  description,
  options,
  className,
  ...props
}: PulsoSelectProps) {
  const reactId = React.useId()
  const selectId = id ?? reactId
  const descriptionId = description ? `${selectId}-description` : undefined
 
  return (
    <div className="grid gap-1.5">
      <label
        htmlFor={selectId}
        className="font-mono text-[10.5px] uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-subtle)]"
      >
        {label}
      </label>
 
      <select
        id={selectId}
        aria-describedby={descriptionId}
        className={[
          "h-9 rounded-[var(--radius-md)] border border-[var(--border-strong)] bg-[var(--card)] px-3 text-sm text-[var(--fg)]",
          "transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-easing)]",
          "focus-visible:border-[var(--primary)] focus-visible:outline focus-visible:outline-[var(--ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)]",
          "disabled:cursor-not-allowed disabled:text-[var(--fg-disabled)] disabled:opacity-60",
          className,
        ].filter(Boolean).join(" ")}
        {...props}
      >
        <option value="" disabled>
          {placeholder}
        </option>
        {options.map((option) => (
          <option key={option.value} value={option.value} disabled={option.disabled}>
            {option.label}
          </option>
        ))}
      </select>
 
      {description ? (
        <p id={descriptionId} className="text-xs text-[var(--fg-muted)]">
          {description}
        </p>
      ) : null}
    </div>
  )
}
<PulsoSelect
  label="Status do caso"
  placeholder="Selecione um status"
  defaultValue="monitor"
  description="Use Crítico apenas quando há impacto operacional confirmado."
  options={[
    { value: "stable", label: "Stable" },
    { value: "monitor", label: "Monitor" },
    { value: "attention", label: "Attention" },
    { value: "high", label: "High" },
    { value: "critical", label: "Critical" },
  ]}
/>

Quando usar

  • Seleção única entre opções conhecidas.
  • Listas com mais de 5 opções.
  • Espaço limitado em toolbar ou formulário compacto.
  • Escolha com valor salvo e auditável.

Quando não usar

  • Para comparar poucas opções importantes; use Radio Group.
  • Para múltipla seleção; use Checkbox ou Multi-select.
  • Para busca em listas longas; combine com combobox/search.
  • Para ação imediata; use Button.

Acessibilidade

  • Label visível é obrigatório; placeholder não substitui label.
  • Use aria-describedby para instrução ou consequência.
  • Opções desabilitadas precisam ser raras e justificáveis.
  • Não dependa de cor para comunicar opção crítica.

Regras

  1. Select é seleção única entre valores conhecidos.
  2. Use a escala de risco stable / monitor / attention / high / critical quando o campo for risco operacional.
  3. Agrupe, filtre ou busque quando a lista ficar longa.
  4. Placeholder é instrução inicial, não valor válido.
  5. Evite alterar estado operacional sem confirmação quando a escolha tiver consequência alta.
Last updated on
Radio GroupSeparator