Pular para o conteúdo
Faculdade PhorteDesign System

Select

Em andamento

Lista de opções nativa (<select>) para escolher um valor, com sugestão inicial que não pode ser devolvida como resposta e estado de erro. No Chrome e no Edge a lista aberta ganha o estilo do sistema; nos outros navegadores, é a do sistema operacional.

Função
Formulário e ação
Também chamado de
lista suspensa, seletor, combo, select, dropdown de formulário
Mora em
app/components/atoms/Select.tsx
Última mudança
2026-09-28
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Com valor
  3. Desabilitado
  4. Erro

Quando usar

Para escolher um valor entre muitas opções conhecidas — estado, curso, modalidade —, dentro de um FormField.

Faça

  • Use placeholder ("Selecione…"): vira uma opção desabilitada, que aparece enquanto nada foi escolhido.
  • Use dentro de um FormField, que liga rótulo, dica e erro.
  • Largura e margem pela className (vão para o invólucro, que posiciona a seta).

Evite

  • Trocar o <select> por uma lista feita à mão: o nativo traz teclado, leitor de tela e celular prontos.
  • Pôr a largura no <select> por classNameDoCampo: o invólucro continua na linha toda e a seta fica fora do campo.
  • Opção vazia escolhível como "nenhuma" — use o placeholder, que não volta como resposta.

Quando não usar. Para poucas opções que valem ser vistas juntas, use o Radio. Para ações (editar, excluir), o Dropdown. Para filtrar uma lista na hora, o FilterGroup.

Nota de uso

A lista aberta é estilizada só no Chrome e no Edge, que suportam appearance: base-select. No Safari e no Firefox ela continua sendo a do sistema operacional — de propósito: estilo progressivo, sem trocar o <select> nativo por uma lista feita à mão. O foco é o do Input: borda de 2px em --border-focus, não mais vermelho. placeholder vira uma opção desabilitada, que não pode ser devolvida como resposta; error emite aria-invalid. Dê largura e margem pela className, que vai para o invólucro; para o <select> em si, classNameDoCampo.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Campo — O `<select>`, com o mesmo contrato visual do Input (`campoVariants`) e espaço à direita para a seta.
  2. Seta — Ícone `ChevronDown`, decorativo, sobre o campo.
  3. Lista — As opções; a primeira, com `placeholder`, é desabilitada.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoBorda --border-interactive; com placeholder, começa na sugestão.
FocoBorda --border-focus de 2px, por CSS — não mais vermelha.
AbertoNo Chrome e no Edge, a lista estilizada (appearance: base-select) sob o campo.
Erroerror ou aria-invalid: borda vermelha e aria-invalid no campo.
Desabilitado50% de opacidade, cursor proibido e fora do Tab — medido.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Sem `value` nem `defaultValue`, com `placeholder`Começa na sugestão, que não pode ser escolhida de volta.
Lista aberta e TabFecha sem mudar o valor — medido.

Relacionados