Select

Um componente de seleção com opções organizadas, suporte a ícones, scroll e separadores.

Utilização

index.tsx
import {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton
} from "@convertcompany/ui";

Exemplos

Com ícones

Você pode adicionar ícones às opções do seletor para melhorar a experiência do usuário.

Com scroll

Você pode adicionar botões de scroll para facilitar a navegação em listas longas.

Com grupos

Você pode usar o SelectGroup para organizar as opções em grupos, SelectLabel para o título e o SelectSeparator para adicionar separadores entre os grupos.

Props

Esse componente extende a implementação do Radix UI, e por isso, possui as mesmas propriedades. Para mais detalhes, consulte a documentação oficial.

Select

PropriedadeTipo
valueValor selecionado.
string
defaultValueValor inicial.
string
onValueChangeCallback ao alterar o valor.
(value: string) => void
disabledDesativa a seleção.
boolean

SelectTrigger

PropriedadeTipo
variantEstilo visual do botão.
default
unstyled
selectSizeTamanho do seletor.
sm
classNameClasse CSS adicional.
string

SelectItem

PropriedadeTipo
valueValor da opção.
string
disabledDesativa a opção.
boolean
classNameClasse CSS adicional.
string

SelectValue

PropriedadeTipo
placeholderTexto exibido quando não há valor selecionado.
string
classNameClasse CSS adicional.
string

SelectContent

PropriedadeTipo
classNameClasse CSS adicional.
string
positionPosição do conteúdo em relação ao trigger.
top
bottom

SelectGroup

PropriedadeTipo
classNameClasse CSS adicional.
string

SelectLabel, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton

PropriedadeTipo
classNameClasse CSS adicional.
string