componentes / select

Select

Combobox acessível com navegação por teclado, busca por digitação e um estilo detalhado com ícone/descrição por opção.

Como usar

Combobox acessível (`role="combobox"` + `listbox`) com navegação por teclado, typeahead e seleção controlada ou não. Ative `searchable` para filtrar por texto e `variant="detailed"` para opções com `leading` e `description`.

preview

País

Busca

Select.tsx

import { Select } from "vaiperui";
 
<Select
  label="País"
  placeholder="Escolha um país"
  searchable
  options={[
    { value: "br", label: "Brasil" },
    { value: "us", label: "Estados Unidos" },
    { value: "pt", label: "Portugal" },
  ]}
/>

Cores

preview

País

primary

País

success

País

warning

País

danger

cores.tsx

<Select variantColor="primary" label="País" options={options} />
<Select variantColor="success" label="País" options={options} />
<Select variantColor="warning" label="País" options={options} />
<Select variantColor="danger" label="País" options={options} />

Estilos

`detailed` amplia o gatilho e as opções, com slot `leading` e `description` por item.

preview

País

default

País

detailed

estilos.tsx

<Select variant="default" label="País" options={options} />
<Select variant="detailed" label="País" options={options} />

Tamanhos

preview

País

tamanhos.tsx

<Select size="sm" label="País" options={options} />
<Select size="md" label="País" options={options} />
<Select size="lg" label="País" options={options} />

Raio

preview

País

none

País

full

raio.tsx

<Select radius="none" label="País" options={options} />
<Select radius="sm" label="País" options={options} />
<Select radius="md" label="País" options={options} />
<Select radius="lg" label="País" options={options} />
<Select radius="full" label="País" options={options} />

Busca

`searchable` adiciona um campo para filtrar as opções por texto.

preview

País

searchable

País

searchStyle full

País

sem busca

busca.tsx

<Select searchable label="País" options={options} />
<Select searchable searchStyle="full" label="País" options={options} />
<Select label="País" options={options} />

Estados

`disabled` bloqueia o select inteiro. Uma opção com `disabled: true` aparece bloqueada e não pode ser escolhida.

preview

País

opção desabilitada

País

disabled

estados.tsx

<Select label="País" options={options} disabled />
 
const options = [
  { value: "br", label: "Brasil" },
  { value: "pt", label: "Portugal", disabled: true },
]

Cor personalizada

`customColor` sobrescreve `variantColor` e pinta foco, borda e destaque a partir de uma única cor.

preview

País

laranja

País

verde

País

violeta

custom-color.tsx

<Select customColor="#ff6600" label="País" options={options} />
<Select customColor="#22c55e" label="País" options={options} />
<Select customColor="#a78bfa" label="País" options={options} />

Props

Prop	Valores	Padrão	Descrição
options	SelectOption[]	—	Lista de opções ({ value, label, disabled?, description?, leading? })
value / defaultValue	string	—	Controlado / não controlado
onValueChange	(value: string) => void	—	Disparado ao selecionar uma opção
placeholder	string	"Select an option"	Texto quando nada está selecionado
emptyMessage	string	"No options found"	Texto quando não há opções
noResultsMessage	(query: string) => string	(query) => `No results for "${query}"`	Texto quando a busca não tem resultados; recebe o termo digitado
searchable	boolean	false	Mostra um campo de busca dentro do menu para filtrar por texto
searchPlaceholder	string	"Search..."	Placeholder do campo de busca
clearSearchLabel	string	"Clear search"	Nome acessível do botão que limpa a busca
searchStyle	"boxed" \| "full"	"boxed"	`boxed`: campo recuado e arredondado. `full`: campo ocupa toda a largura do topo do menu, com divisória
variant	default \| detailed	default	default: dropdown compacto de uma linha. detailed: gatilho e opções maiores, com leading e description por opção e tinta na selecionada
variantColor	primary \| success \| warning \| danger	primary	Cor de foco, borda aberta e destaque da opção
customColor	cor CSS válida \| { light, dark }	—	Sobrescreve variantColor: pinta foco, borda e destaque a partir de uma única cor, ou de um objeto { light, dark }
size	sm \| md \| lg	md	Altura do gatilho e das opções
radius	none \| sm \| md \| lg \| full	md	Arredondamento do gatilho e do menu
animation	none \| smooth \| fast \| bounce	smooth	Transição do menu
disabled	boolean	false	Desabilita o select inteiro
name	string	—	Espelha o valor num <input type="hidden"> para envio em forms
label / aria-label / id / className / style	string / string / string / string / CSSProperties	—	Rótulo acima do gatilho, nome acessível quando não há rótulo e props de layout
option.leading / option.description	ReactNode / string	—	Slot visual (bandeira, ícone, avatar) antes do texto e segunda linha por opção. O slot funciona nas duas variantes; a description só renderiza com variant="detailed"