Select

A lista flutuante do select.

Nasce com a largura do gatilho e rola sozinha quando não cabe na tela. O portal usa o contêiner do RivoProvider, então o tema vale dentro dela.

side, align e sideOffset posicionam o painel, como nas outras peças que flutuam. Pedir qualquer um dos três troca o modo de posicionamento: por padrão a lista se sobrepõe ao gatilho para alinhar o item escolhido com o texto dele, e nesse modo não há lado nem folga a respeitar. Quem não pede nada continua com o alinhamento pelo item.

<SelectContent side="top" align="start">
  <SelectItem value="abertas">Abertas</SelectItem>
</SelectContent>

Uma família dentro da lista, com o SelectGroupLabel de cabeçalho.

Natureza de operação separada em entrada e saída, UF por região, plano de contas por grupo: a lista longa que tem famílias de verdade lê-se por partes, e não de cima a baixo.

O desenho é o do ComboboxGroup, e não o do MenuGroup com label: as duas são peças de formulário e listam opções, e quem troca uma pela outra ao descobrir que a lista cresceu não deveria ter que reescrever a árvore.

<SelectContent>
  <SelectGroup>
    <SelectGroupLabel>Saída</SelectGroupLabel>
    <SelectItem value="5102">Venda de mercadoria</SelectItem>
    <SelectItem value="5915">Remessa para conserto</SelectItem>
  </SelectGroup>

  <SelectSeparator />

  <SelectGroup>
    <SelectGroupLabel>Entrada</SelectGroupLabel>
    <SelectItem value="1202">Devolução de venda</SelectItem>
  </SelectGroup>
</SelectContent>

O items da raiz continua sendo a lista inteira e plana: é por ele que o gatilho traduz o valor guardado no rótulo que a pessoa leu. O grupo arruma a lista aberta, e não o que o gatilho mostra.

O SelectGroupLabel vive dentro do grupo porque é o grupo que aponta o aria-labelledby para ele. Título escrito ao lado não nomeia nada, e nenhum tipo reclama.

Quando não usar

Quando agrupar é a tentativa de domar uma lista que ficou grande demais, o remédio é outro: Combobox, que traz a busca. Rolar cento e vinte cidades arrumadas por região continua sendo rolar cento e vinte cidades, e o cabeçalho só acrescenta altura ao caminho.

Grupo de dois itens não paga o cabeçalho que cobra. Sem famílias de verdade, a lista plana diz a mesma coisa em menos linhas.

Uma opção da lista.

O value é o que volta no onValueChange; o conteúdo é o que a pessoa lê. A marca de escolhido tem coluna própria, então rótulo curto e longo alinham pela mesma vertical.

A linha entre dois grupos da lista.

Ela sai com role="presentation", e não com o role="separator" do MenuSeparator. A diferença não é de aparência: dentro de uma lista de opções, um nó com papel próprio entra na contagem que o leitor de tela anuncia ("opção 3 de 12"), e a conta passa a não bater com o que se vê.

Quando não usar

Sem SelectGroup em volta, ela separa o quê? Numa lista plana a linha vira divisão sem critério: quem lê procura o motivo do corte e não acha. Se o motivo existe, ele tem nome, e o nome é um SelectGroupLabel.

O campo fechado do select: mostra a escolha e abre a lista.

Tem a mesma altura e a mesma borda do Input, para um formulário misto não sair desalinhado. A seta é desenhada aqui, não passe ícone por fora.

O texto do gatilho: o que está escolhido agora.

Passe items com { label, value } no Select para ele mostrar o rótulo. Sem isso ele mostra o valor cru, porque só a lista sabe traduzir um pelo outro. É contrato da Base UI, e a armadilha mais fácil de cair neste componente.