Step

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

Design System

Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Propriedades

contentType

Atributo	content-type
Descrição	Propriedade que define o tipo de conteúdo a ser exibido dentro do componente step e stepItem
Tipo	"br-icon" | "default" | "no-content" | "slotted"
Valor padrão	'default'

initialIndex

Atributo	initial-index
Descrição	Índice inicial zero-based. Quando informado, tem precedência sobre initialStep.
Tipo	number
Valor padrão	---

initialStep Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	initial-step
Depreciação	Use initialIndex.
Descrição	define o passo que começará destacado
Tipo	string
Valor padrão	'0'

labelPosition

Atributo	label-position
Descrição	Propriedade que define a posição onde o texto de destaque,label, ficará localizado no stepItem
Tipo	"bottom" | "left" | "right" | "top"
Valor padrão	'bottom'

layout Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	layout
Depreciação	Use orientation.
Descrição	propriedade responsável por definir a orientação do componente Step
Tipo	"horizontal" | "vertical"
Valor padrão	'horizontal'

mode

Atributo	mode
Descrição	Propriedade que define o tipo de comportamento que o componente Step deverá seguir
Tipo	"controller" | "step"
Valor padrão	'step'

orientation

Atributo	orientation
Descrição	Orientação do componente. Quando informada, tem precedência sobre layout.
Tipo	"horizontal" | "vertical"
Valor padrão	---

progressionType

Atributo	progression-type
Descrição	Propriedade que define o tipo de progressão de etapas que o step vai executar
Tipo	"linear" | "nonlinear"
Valor padrão	'nonlinear'

verticalContentPlacement

Atributo	vertical-content-placement
Descrição	Define a posição do conteúdo de cada etapa no layout vertical. - between: conteúdo abaixo do indicador/rótulo, entre as etapas. - side: conteúdo em coluna lateral à linha de indicadores.
Tipo	"between" | "side"
Valor padrão	'between'

Slots

Nome	Descrição
"default"	Slot para os itens do step (br-step-item), aceitando apenas esse componente.

Eventos

Evento	Descrição	Depreciação	Propagação
brStepChange	Emite um evento quando o step ativo muda. O evento carrega o índice do novo step ativo (0-based).	---	true

Métodos

BackToPreviousStep Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Descrição	Método disponibilizado via API do elemento que controla o componente Step, responsável por retornar ao passo anterior e atualizar o valor do estado activeStep
Assinatura	BackToPreviousStep() => Promise<void>
Depreciação	Use previous.
Parâmetros	---

GetActiveStep

Descrição	Método disponibilizado via API do elemento que permite a um componente externo obter a etapa com o estado ativo do componente Step.
Assinatura	GetActiveStep() => Promise<number>
Parâmetros	---

ProceedToNextStep Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Descrição	Método disponibilizado via API do elemento que controla o componente Step, responsável por avançar para o próximo passo e atualizar o valor do estado activeStep
Assinatura	ProceedToNextStep() => Promise<void>
Depreciação	Use next.
Parâmetros	---

StepValidation Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Descrição	Método disponibilizado via API do elemento que integra um componente externo ao componente Step, permitindo sinalizar validações ou destacar a etapa com estado ativo.
Assinatura	StepValidation(validationStatus: StepValidationStatus) => Promise<void>
Depreciação	Use setCurrentValidation.
Parâmetros	validationStatus:

next

Descrição	Avança para o próximo passo.
Assinatura	next() => Promise<void>
Parâmetros	---

previous

Descrição	Retorna ao passo anterior.
Assinatura	previous() => Promise<void>
Parâmetros	---

setCurrentValidation

Descrição	Define o estado de validação do passo ativo.
Assinatura	setCurrentValidation(validationStatus: StepValidationStatus) => Promise<void>
Parâmetros	validationStatus:

CSS Shadow Parts

Nome	Descrição
"container"	Parte para o contêiner principal envolvendo todos os step-items, usada para estilizar layout geral via ::part().

Dependências

Subcomponentes

• br-step-item

Usado por

• br-carousel
• br-wizard

Gráfico