Seleção
Um dropdown select built on React Aria - o gatilho corresponde à superfície da Figma 1:1, o popover é não-modal para que a página continue a rolar, e os itens aceitam conteúdo de forma livre como pontos de estado e avatares.
Instalação
Você pode adicionar este componente selecionado usando o nosso CLI ou manualmente:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add selectUsando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Compacto e confortável
Por padrão, o menu é o dropdown compacto do BoardUI: um painel de 14px de raio com 4px de padding sobre linhas justas, da largura do gatilho. Uma lista longa rola sob um desfoque suave no topo e abre na linha selecionada. Passe variant="comfortable" para o menu mais espaçoso de 266px.
const years = Array.from({ length: 41 }, (_, index) => 2000 + index);
{/* Compact is the default menu: no prop needed */}<Select label="Compact" defaultSelectedKey="2026" className="w-[120px]"> {years.map((year) => ( <SelectItem key={year} id={String(year)}>{year}</SelectItem> ))}</Select>
{/* The roomier 266px menu */}<Select label="Comfortable" variant="comfortable" defaultSelectedKey="2026" className="w-[120px]"> {years.map((year) => ( <SelectItem key={year} id={String(year)}>{year}</SelectItem> ))}</Select>Rótulo e placeholder
Passe label para um rótulo de campo visível: o React Aria o renderiza como o rótulo do select e nomeia o gatilho com ele, então leitores de tela anunciam os dois. placeholder aparece até que algo seja escolhido. Selects sem rótulo visível, como os filtros acima, usam aria-label.
{/* label names the select; placeholder shows until something is picked */}<Select label="Role" placeholder="Select a role" className="w-[240px]"> <SelectItem id="admin" textValue="Admin">Admin</SelectItem> <SelectItem id="editor" textValue="Editor">Editor</SelectItem> <SelectItem id="viewer" textValue="Viewer">Viewer</SelectItem></Select>Com ponto de estado
Itens renderizam crianças arbitrárias ao lado da etiqueta - sempre passam textValue Assim, datilografar e a etiqueta do gatilho manter-se correta.
import { StatusDot } from "@/components/base/badges/status-dot";
{/* Items take free-form content - dots, avatars, icons */}<Select aria-label="Purchase status" defaultSelectedKey="completed" className="w-[142px]"> <SelectItem id="completed" textValue="Completed"> <StatusDot color="green" /> Completed </SelectItem> <SelectItem id="waiting" textValue="Waiting"> <StatusDot color="yellow" /> Waiting </SelectItem> <SelectItem id="processing" textValue="Processing"> <StatusDot color="indigo" /> Processing </SelectItem></Select>