Switcher

Componente que permite ao usuário alternar entre diferentes times ou contas.

Exemplo

API

Switcher

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	React.ReactNode	-	-	Conteúdo do switcher (componentes de trigger e de conteúdo).
value	string	-	-	Valor controlado opcional do item selecionado.
defaultValue	string	-	-	Valor selecionado inicial quando não controlado.
onValueChange	(value: string) => void	-	-	Função opcional chamada quando o valor selecionado muda.
open	boolean	true, false	-	Controla o estado de abertura do dropdown (modo controlado).
defaultOpen	boolean	true, false	false	Define se o dropdown começa aberto (modo não controlado).
onOpenChange	(open: boolean) => void	-	-	Função chamada quando o estado de abertura muda.

SwitcherTrigger

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	React.ReactNode	-	-	Elemento de trigger que abre o dropdown do switcher ao ser clicado.
asChild	boolean	true, false	true	Quando true, se mescla ao elemento filho direto em vez de renderizar um botão.
className	string	Qualquer string de classe CSS	-	Classes CSS adicionais aplicadas ao trigger (repassadas ao elemento filho quando asChild é true).

SwitcherContent

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	React.ReactNode	-	-	Conteúdo exibido dentro do dropdown (grupos, itens, separadores, rodapé).
align	"start" | "center" | "end"	"start", "center", "end"	"center"	Alinhamento do dropdown em relação ao elemento de trigger.
side	"top" | "right" | "bottom" | "left"	"top", "right", "bottom", "left"	"right"	Lado em que o dropdown aparece em relação ao elemento de trigger. Com a janela abaixo de 768px de largura, é sempre "bottom" (veja o useIsMobile).
className	string	Qualquer string de classe CSS	-	Classes CSS adicionais aplicadas ao painel do dropdown.
size	"sm" | "md" | "lg"	"sm", "md", "lg"	"md"	Tamanho do menu inteiro (itens, rótulos dos grupos, separadores e rodapé), como o size do DropdownMenuContent.
...props	DropdownMenuContentProps	-	-	As demais props do DropdownMenuContent (ex.: sideOffset, loop, onCloseAutoFocus) chegam ao menu.

SwitcherGroup

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	React.ReactNode	-	-	Itens que pertencem a este grupo.
label	string	-	-	Label opcional exibido como cabeçalho do grupo. Também dá nome ao grupo de opções para leitores de tela.

SwitcherItem

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	React.ReactNode	-	-	Conteúdo do item (normalmente um label de texto).
value	string	-	-	Valor opcional do item. Quando informado, o item passa a ser selecionável.
onClick	() => void	-	-	Função opcional chamada quando o item é clicado.
icon	string | React.ReactNode	-	-	Ícone opcional. Pode ser a URL de uma imagem (string) ou um elemento React.

SwitcherFooter

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	React.ReactNode	-	-	Conteúdo do item de rodapé (normalmente um label de texto).
onClick	() => void	-	-	Função opcional chamada quando o rodapé é clicado.
icon	React.ReactNode	-	-	Ícone opcional exibido no rodapé.

SwitcherSeparator

Este componente não tem props. Ele renderiza um separador visual entre grupos ou seções.