Componentes
Este é o ponto de entrada dos componentes React disponíveis em beta. Os componentes estão agrupados pelo problema que resolvem; detalhes de distribuição e provider aparecem somente dentro da implementação de cada componente.
Dentro de cada página, Design, Uso, Implementação e Acessibilidade seguem o mesmo contrato editorial.
Ações
Componentes que iniciam ou confirmam uma ação.
Conteúdo e estrutura
Elementos para organizar, separar e apresentar informação.
Entrada e seleção
Controles para coletar, editar e selecionar dados.
- CheckboxPermite selecionar zero, uma ou várias opções independentes.
- ComboboxFiltra uma lista de opções e permite selecionar um valor pelo teclado ou ponteiro.
- Form FieldCompõe label, controle, ajuda e erro em um campo acessível.
- Input TextColeta texto curto, dados estruturados ou valores de uma única linha.
- RadioPermite escolher exatamente uma opção entre alternativas relacionadas.
- SelectSeleciona um único valor de uma lista conhecida sem campo de busca.
- TextareaColeta texto livre que pode ocupar várias linhas.
- ToggleAlterna imediatamente uma configuração entre ligada e desligada.
Feedback e status
Componentes que comunicam resultado, progresso ou estado.
- AlertComunica informação, confirmação, atenção ou erro dentro do fluxo atual.
- BadgeIdentifica status ou metadados curtos próximos ao conteúdo relacionado.
- SkeletonRepresenta temporariamente a estrutura do conteúdo durante o carregamento.
- SpinnerIndica progresso indeterminado para uma operação em andamento.
- ToastConfirma resultados e comunica feedback transitório sem interromper o fluxo atual.
Navegação
Padrões para orientar deslocamento e localização no produto.
Overlay e disclosure
Componentes que revelam conteúdo contextual ou em uma nova camada.
- AccordionOrganiza conteúdo relacionado em seções que podem ser expandidas ou recolhidas.
- ModalInterrompe o fluxo para uma decisão ou tarefa que exige atenção concentrada.
- PopoverExibe conteúdo contextual breve ancorado a um trigger, sem interromper o restante da página.
- TooltipExibe um label visual breve quando um trigger recebe hover ou focus.